html微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题...

很多情况，我们页面局部可以滚动，但是由于微信浏览器整个页面可以拉伸，导致页面内部的滚动体验不好。所以我们可以把整个页面的滑动事件给禁用掉，然后让页面的某一个区域可以正常的滑动，就可以达到我们理想的效果。

具体实现法案如下：

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 });

总结

以上是生活随笔为你收集整理的html微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题...的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。