js 滚动监听，核心方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了js 滚动监听，核心方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue使用

export default {
data:{},
//挂在完成
mounted () { 
    window.addEventListener('scroll', function); 
  },
//销毁
destroyed () {
    window.removeEventListener("scroll", function, true);
  },
｝

一、开始滚动监听

  window.addEventListener('scroll', function);

二、关闭滚动监听

window.removeEventListener("scroll", function, true);

三、滚动监听核心方法

3.1先开启监听

window.addEventListener('scroll', function(){
                handleScroll({
                    distance:10,//距离底部多少开始加载
                    IsDisabled:false,//是否停止
                    CallBackFun:function(res){
                        console.log('回调=============',res);
                    },//回调方法
                });
            });

3.2监听核心方法

//该方法是以浏览器窗口和body容器窗口的滚动条为依据计算执行的
handleScroll (obj) {
if(typeof(obj)!='object')
{
    obj={
            distance:10,//距离底部多少开始加载
            IsDisabled:false,//是否停止
            CallBackFun:null,//回调方法
        };
} 
//距离
if(typeof(obj.distance)!='number')
{
    obj.distance=10;
}
//停止
if(typeof(obj.IsDisabled)!='boolean')
{
    obj.IsDisabled=false;
}
//回调
if(typeof(obj.CallBackFun)!='function')
{
    obj.CallBackFun=null;
}  
// console.log('参数对象obj==',typeof(obj),obj);
// console.log('距离obj.distance==',typeof(obj.distance),obj.distance);
// console.log('停止obj.IsDisabled==',typeof(obj.IsDisabled),obj.IsDisabled);
// console.log('回调obj.CallBackFun==',typeof(obj.CallBackFun),obj.CallBackFun);

//变量scrollTop是滚动条滚动时，距离顶部的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//变量windowHeight是可视区的高度
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//变量scrollHeight是滚动条的总高度
var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
// 滚动条偏移量 
let offset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
// console.warn('滚动条距离顶部的距离scrollTop==',scrollTop);
// console.log('窗口可视区的高度windowHeight==',windowHeight);
// console.log('滚动条的总高度scrollHeight==',scrollHeight);
// console.log('滚动条偏移量offset==',offset);

//计算底部距离 
var _dis=(scrollTop + windowHeight); 
//滚动条到底部的条件
if ( _dis==scrollHeight) {
    console.error('滚动高度+窗口高度='+scrollTop + windowHeight);
    if(typeof(obj.CallBackFun)=='function'&&obj.IsDisabled==false)
    {
        var resObj={
        scrollTop,
        windowHeight,
        scrollHeight,
        offset,
        _dis
        }
        return obj.CallBackFun(resObj);
    }
}
},

四、回调反参数说明

offset: 691 //滚动条偏移量 
scrollHeight: 1600 //变量scrollHeight是滚动条的总高度
scrollTop: 691 //变量scrollTop是滚动条滚动时，距离顶部的距离
windowHeight: 909 //变量windowHeight是可视区的高度
_dis: 1600 //底部距离