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

6,075 阅读1分钟

造轮子的目的:

做项目的时候需要一个滚动监听的功能,html结构已经都写好了,不想使用vue组件的方式来写,因为不想改造html结构,于是花了几个小时做了一个简单的,使用vue指令方式来做的,项目上够用就结束了。 后来想想反正还差没多少还不如完善完善做成插件吧。 结果花了两天多。。

先看效果

demo

主要的坑:

  • 滚动的动画效果,抄袭了 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…