vue监听滚动事件(scrollTop)

代码

let scroll = {
    methods: {
        getScrollTop() {            
            var scrollTop = window.pageYOffset  //用于FF
                || document.documentElement.scrollTop  
                || document.body.scrollTop  
                || 0;
            return scrollTop            
        },
        handleScroll () {                   
            let screenH = document.body.clientHeight
            // let windowScrollY = window.scrollY; 
            let windowScrollY = this.getScrollTop()                       
            if (windowScrollY > screenH) {       
                // 当滚动大于一屏高度时的操作                 
            } else {  
                // 当滚动小于于一屏高度时的操作
            }  
        },
      },
      mounted () {     
          window.addEventListener('scroll', this.handleScroll, true);
      },
      destroyed () {
          window.removeEventListener('scroll', this.handleScroll, true);
      }
}
export default scroll

监听滚动

不好使的话在最后参数加个true

window.addEventListener('scroll', this.handleScroll, true);
window.removeEventListener('scroll', this.handleScroll, true);

获取scrollTop

方式一

var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
    scroll_top = document.documentElement.scrollTop;
}
else if (document.body) {
    scroll_top = document.body.scrollTop;
}
return scroll_top;   

方式二

var scrollPos; 
if (typeof window.pageYOffset != 'undefined') { 
    scrollPos = window.pageYOffset; 
} else if (typeof document.compatMode != 'undefined' &&    document.compatMode != 'BackCompat') { 
    scrollPos = document.documentElement.scrollTop; 
} else if (typeof document.body != 'undefined') { 
    scrollPos = document.body.scrollTop; 
}
return scrollPos

方式三

var scrollTop = window.pageYOffset  //用于FF
    || document.documentElement.scrollTop  
    || document.body.scrollTop  
    || 0;
return scrollTop 

网站导航

网站导航