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

问题描述

问 题

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

//获取浏览器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

解决方案

记得昨天在群里有人就问的这个问题。。。用闭包可以实现，关键是缓存好上次滑动时候的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;
                }
            }

        })();

这篇关于javascript - 怎么判断滚动条滚动方向？【附demo】的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！