浏览器中页面scroll横纵滑动

背景：浏览器中页面某一区域内，当渲染内容远远大于该区域的宽度和高度，则会出现scroll横纵滑动条

1、 横向和纵向都可能出现滚动事件，所以需要区分当前滚动是横向还是纵向

2、滚动触发是连续事件，做了节流处理：SCROLL_LOCK和定时器

		var $view = $('.view-container');
        var $scroller = $('.scroll-container');
        var viewWidth = $view.width();
        var viewHeight = $view.height();

        var oldViewLeft = $view.scrollLeft();
        var oldViewTop = $view.scrollTop();
        $view.on('scroll', function () {
            if (SCROLL_LOCK) {
                return;
            }
            SCROLL_LOCK = true;
            var currentViewLeft = $view.scrollLeft();
            var currentViewTop = $view.scrollTop();
            var scrollerWidth = $scroller.width();
            var scrollerHeight = $scroller.height();
            // 横向滚动
            if (oldViewLeft !== currentViewLeft) {
                if (scrollerWidth - (currentViewLeft + viewWidth) < 10) {
                    ······
                }
                 // 更新滑动之后的值
                oldViewLeft = currentViewLeft;
            }
            // 纵向滚动
            if (oldViewTop !== currentViewTop) {
                if (scrollerHeight - (currentViewTop + viewHeight) < 10) {
                    ······
                }
                // 更新滑动之后的值
                oldViewTop = currentViewTop;
            }
			// 节流设置
            setTimeout(function () {
                SCROLL_LOCK = false;
            }, 200);
        });

注：做横向和纵向处理的初衷是：我们设置滑动阀值的时候，如果设置的不合理，则可能会导致报错

案例代码：

		var $view = $('.view-container');
        var $scroller = $('.scroll-container');
        var viewWidth = $view.width();
        var viewHeight = $view.height();

        $view.on('scroll', function () {
            if (SCROLL_LOCK) {
                return;
            }
            SCROLL_LOCK = true;
            var currentViewLeft = $view.scrollLeft();
            var currentViewTop = $view.scrollTop();
            var scrollerWidth = $scroller.width();
            var scrollerHeight = $scroller.height();
            // 横向滚动
            if (scrollerWidth - (currentViewLeft + viewWidth) < 10) {
                ······
            }

            // 纵向滚动
            if (scrollerHeight - (currentViewTop + viewHeight) < 10) {
                  ······
              }
  
			// 节流设置
            setTimeout(function () {
                SCROLL_LOCK = false;
            }, 200);
        });

案例分析：如果向某一个方向滚动的时候，但是阀值设置却同时满足了横向滚动和纵向滚动，这时候横向和纵向都会进入滚动处理，则可能会导致报错；因为我们实际滚动事件是只可能往一个方向滚动，同时阀值设置不好控制，因此需要对横向还是纵向滚动，需要进行判断。