怎么判断滚动条滚动方向？【附demo】

Question

问题描述：
怎么判断浏览器滚动条滚动方向？就是上下和左右滚动。

//获取浏览器scroll
function scroll() {
        if (window.pageYOffset != null){
        // 支持IE9 +
          return{
                    left:window.pageXOffset,
                    top:window.pageYOffset
                }
            }else if (document.compatMode == 'CSS1Compat'){
        return{
                        left:document.documentElement.scrollLeft,
                        top:document.documentElement.scrollTop
                }
                }
                return{
                    left:document.body.scrollLeft,
                    top:document.body.scrollTop
                }
            }

        window.onscroll = function(){
                var sLeft = scroll().left;
                var sTop = scroll().top;
                console.log('sLeft:' + sLeft);
                console.log('sTop:' + sTop);
    // if(){
    //  console.log('上下滚动')  
    //  }else{
    //    console.log('左右滚动')  
    //  }
            }

demo：看控制台打印出来的数值
codepen

Answer 1

记得昨天在群里有人就问的这个问题。。。用闭包可以实现，关键是缓存好上次滑动时候的top和Left然后进行比较。

        function scroll() {
            if (window.pageYOffset != null) {
                // 支持IE9 +
                return {
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            } else if (document.compatMode == 'CSS1Compat') {
                return {
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }
            return {
                left: document.body.scrollLeft,
                top: document.body.scrollTop
            }
        }

        window.onscroll = (function () {
            var sLeft = scroll().left;
            var sTop = scroll().top;

            return function () {

                if (sTop != scroll().top) {
                    console.log('上下滚动')
                    sTop = scroll().top;
                }
                if (sLeft != scroll().left) {
                    //   console.log(sTop);
                    console.log('左右滚动')
                    sLeft = scroll().left;
                }
            }

        })();

Answer 2

略麻烦。

• 首先获得开始滚动时滚动条的x ,y坐标

• 然后在滚动条发生变化时对之前保存的坐标进行比较。

• 参考

document.body.scrollTop
document.body.scrollLeft
window.onscroll

Answer 3

写这么复杂还是只能判断 上下 或者 左右？ 要是想知道是上还是下呢？