阻止移动端窗体滚动的JS/CSS处理
首先CSS层面，在<html>标签上增加一个类名，例如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();
});
这种处理兼容性强，效果最好，但是有一个问题，就是如果浮层自己也有滚动，那么这种处理会让浮层里面自己的滚动行为也无法触发，因此，我们的处理要更进一步，如下：
- 当手指
touchstart的元素不是滚动容器同时不是容器的子元素的时候，阻止默认行为，； - 如果手指
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);
}
网友评论