js两种滚动事件写法

方式一：可判断滚动条滚动方向。

$(window).scroll(() => {
    // 滚动条距文档顶部的距离, || 是做兼容处理的
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    // 滚动条滚动的距离
    let scrollStep = scrollTop - this.oldScrollTop            
    // 更新-滚动前,滚动条到文档顶部的距离
    this.oldScrollTop = scrollTop

    if (scrollStep > 0) {
        // console.log('滚动条向下滚动')
    }
    else {
        // console.log('滚动条向上滚动')
    }
})

根据滚动条滚动的距离是否大于 0 来判断向上还是向下滚动。不太适合用于下滚无限加载，因为加载需要有固定的底部距离，此写法不太好确定，效果一般。

方式二：只判断滚动条底部到可视区底部的距离，即可视区底部到页面底部的距离，因此方向是只向下的。

$(window).scroll(() => {
    let scrollH = document.body.scrollHeight
    let scrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    let clientH = document.documentElement.clientHeight
    let instance = scrollH - scrollT - clientH

    if (instance < 50) {
        // console.log('滚动条向下滚动')
    }
})

两种方式对于向下滚动没有大的区别，第二种方向是专门针对向下滚动的，用于下滚无限加载很简单实用。