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

Question

问题描述：怎么判断浏览器滚动条滚动方向？就是上下和左右滚动。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;

                }

            }

        })();