web移动端浮层滚动阻止window窗体滚动JS/CSS处理

阻止移动端窗体滚动的JS/CSS处理

首先CSS层面，在标签上增加一个类名，例如noscroll，然后配合如下CSS和JS代码：

.noscroll,
.noscroll body {
  overflow: hidden;
}
.noscroll body {
  position: relative;
}

然后当浮层出现的时候：

document.getElementsByTagName('html')[0].classList.add('noscroll');

当浮层消失的时候：

document.getElementsByTagName('html')[0].classList.remove('noscroll');

可以让一部分浏览器的窗体不能滚动，但不包括Safari等浏览器，怎么办呢？

我们可以在浮层touchmove的时候，阻止默认事件达到避免滚动的问题，例如：

$('aside').on('touchmove', function(event) {
    event.preventDefault();
});

这种处理兼容性强，效果最好，但是有一个问题，就是如果浮层自己也有滚动，那么这种处理会让浮层里面自己的滚动行为也无法触发，因此，我们的处理要更进一步，如下：

1. 当手指touchstart的元素不是滚动容器同时不是容器的子元素的时候，阻止默认行为，；
2. 如果手指touchstart的元素是滚动容器或者容器子元素的时候，不阻止默认行为，但不包括滚动到容器边缘的时候。

完整代码（依赖Jquery或者Zepto）：
CSS部分：

.noscroll,
.noscroll body {
  overflow: hidden;
}
.noscroll body {
  position: relative;
}

JS部分：

$.smartScroll = function(container, containerScrollable) {
  // 如果没有滚动容器选择器，或者已经绑定了滚动时间，忽略
    if (!selectorScrollable || container.data('isBindScroll')) {
        return;
     }
    // 是否是搓浏览器
    // 自己在这里添加判断和筛选
    var isSBBrowser;

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

    // 事件处理
    container.on({
        touchstart: function (event) {
            var events = event.touches[0] || event;
            
            // 先求得是不是滚动元素或者滚动元素的子元素
            var elTarget = $(event.target);
            
            if (!elTarget.length) {
                return;    
            }
            
            var elScroll;
            
            // 获取标记的滚动元素，自身或子元素皆可
            if (elTarget.is(selectorScrollable)) {
                elScroll = elTarget;
            } else if ((elScroll = elTarget.parents(selectorScrollable)).length == 0) {
                elScroll = null;
            }
            
            if (!elScroll) {
                return;
            }
            
            // 当前滚动元素标记
            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 elScroll = data.elScroll;
            // 当前的滚动高度
            var scrollTop = elScroll.scrollTop();
    
            // 现在移动的垂直位置，用来判断是往上移动还是往下
            var events = event.touches[0] || event;
            // 移动距离
            var distanceY = events.pageY - data.posY;
    
            if (isSBBrowser) {
                elScroll.scrollTop(data.scrollY - distanceY);
                elScroll.trigger('scroll');
                return;
            }
    
            // 上下边缘检测
            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);
}