很多情况,我们页面局部可以滚动,但是由于微信浏览器整个页面可以拉伸,导致页面内部的滚动体验不好。所以我们可以把整个页面的滑动事件给禁用掉,然后让页面的某一个区域可以正常的滑动,就可以达到我们理想的效果。
具体实现法案如下:
const overscroll = function(el) {
el.addEventListener('touchstart', function() {
var top = el.scrollTop;
var totalScroll = el.scrollHeight;
var currentScroll = top + el.offsetHeight;
if (top === 0) {
el.scrollTop = 1;
} else if (currentScroll === totalScroll) {
el.scrollTop = top - 1;
}
});
el.addEventListener('touchmove', function(evt) {
if (el.offsetHeight < el.scrollHeight) {
evt._isScroller = true;
}
});
};
overscroll(document.querySelector('.scroll'));// 需要滚动的区域类名:如:.scroll
const wrap = document.querySelector('.wrap'); //页面最外层的类名如:.wrap
wrap.addEventListener('touchmove', function(evt) {
if (!evt._isScroller) {
evt.preventDefault();
}
}, { passive: false });