滚动监听

发表于 | 分类于 | 评论数： | 阅读次数：

在进行网页设计的时候,有一个需求就是在网页滚动到指定位置时执行特定的操作,这时候就需要用到滚动监听.

scrollTop

JavaScript 的原生方法,获取滚动距离:

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log("滚动距离" + scrollTop);

为保证兼容性.使用document.documentElement.scrollTop || document.body.scrollTop

ScrollWatch

使用ScrollWatch插件来实现指定位置的滚动监听.
当需要监听的元素进入视野时,会给元素添加scroll-watch-in-view 的 class, 元素离开视野时添加 scroll-watch-ignore class.

在需要监听的元素上添加data-scroll-watch属性,并进行初始化:

var sw = new ScrollWatch({
                        watchOnce: false,
                        infiniteScroll: false,
                        // infiniteOffset: 50,
                        inViewClass: 'fadeInUp',
                        onElementInView: function(data) {
                            console.log(data.el, '...is now in view');
                            data.el.classList.add("");
                        }
                    });
  • watchonce:监听一次,如果设置为 true,则每次 inview 都会触发;
  • inviewClass: 进入视野时要添加的类;
  • onElementInView:进入视野时的回调函数.
thank u !