手动禁止移动端网页下拉

var smartScroll = function (container, selectorScrollable) {
    // 如果没有滚动容器选择器,或者已经绑定了滚动时间,忽略
    if (!selectorScrollable || container.data('isBindScroll')) {
        return;
    }

    // 自己在这里添加判断和筛选
    var isSBBrowser;
    var distanceY;

    var data = {
        posY: 0,
        maxscroll: 0
    };

    // 事件处理
    container.on({
        touchstart: function () {
            var events = event.touches[0] || event;
            var elScroll = container;
            // 当前滚动元素标记
            data.elScroll = elScroll;
            data.posY = events.pageY;
            data.scrollY = elScroll.scrollTop();
            // 是否可以滚动
            data.maxscroll = elScroll[0].scrollHeight - elScroll[0].clientHeight;
        },
        touchmove: function () {
            // 如果不足于滚动,则禁止触发整个窗体元素的滚动
            if (data.maxscroll <= 0 || isSBBrowser) {
                // 禁止滚动
                event.preventDefault();
            }
            // 当前的滚动高度
            var scrollTop = data.elScroll.scrollTop();

            // 现在移动的垂直位置,用来判断是往上移动还是往下
            var events = event.touches[0] || event;
            // 移动距离
            distanceY = events.pageY - data.posY;

            // 上边缘检测
            if (distanceY > 0 && scrollTop == 0) {
                // 往上滑,并且到头
                // 禁止滚动的默认行为
                event.preventDefault();
                return;
            }

            // 下边缘检测
            if (distanceY < 0 && (scrollTop + 1 >= data.maxscroll)) {
                // 往下滑,并且到头
                // 禁止滚动的默认行为
                event.preventDefault();
                return;
            }
        },
        touchend: function () {
            data.maxscroll = 0;
        }
    });

    // 防止多次重复绑定
    container.data('isBindScroll', true);
};

 

posted @ 2020-06-02 21:26  闯入码途的水产人  阅读(516)  评论(0编辑  收藏  举报