造*的目的:
做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够用就结束了。 后来想想反正还差没多少还不如完善完善做成插件吧。 结果花了两天多。。
先看效果
主要的坑:
- 滚动的动画效果,抄袭了
vue-scrollactive
的做法,用到库bezier-easing
。当然,这个插件相对于vue-scrollactive
的优势在于,我可以指定滚动容器,并不仅限于window下的滚动。 - 低版本的chrome核心 dom对象没有
scrollTo
方法,使用dom.scrollTop = value
来替代。当然,这是基础知识薄弱造成的。。。 - 某些浏览器不支持
document.body.scrollTop
; 某些浏览器不支持document.documentElement.scrollTop
。。呵呵哒 - vue中指令对于dom的操作时机:
inserted
是在created
之后,在mounted
之前
特性
- 滚动时判断出窗口中当前元素
- 暴露api scrollTo *指定要滚到的位置
- 滚动容器*指定,不局限于window
- vue 指令的方式
- 监听元素没有任何限制,无需使用id 或者 class 标记。当然,如果要指定滚动容器,那必须要有一个id 或者class
- 导航列表没有任何限制
缺陷
- 用起来不是那么傻瓜式
- 动画目前还不能自定义
- 目前还不能一个页面指定两个以上需要监听的滚动容器
开源地址
https://github.com/Desdesdesgo/vue-scrollwatch