vue插件——滚动监听 vue-scrollwatch

造轮子的目的：

做项目的时候需要一个滚动监听的功能，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
• 导航列表没有任何限制

缺陷

• 用起来不是那么傻瓜式
• 动画目前还不能自定义
• 目前还不能一个页面指定两个以上需要监听的滚动容器

开源地址

github.com/Desdesdesgo…

转载于:https://juejin.im/post/5a75b5c95188257a5e571c9e