很多情況，我們頁面局部可以滾動，但是由于微信瀏覽器整個頁面可以拉伸，導致頁面內部的滾動體驗不好。所以我們可以把整個頁面的滑動事件給禁用掉，然后讓頁面的某一個區域可以正常的滑動，就可以達到我們理想的效果。

具體實現法案如下：

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微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。