很多情況，我們頁(yè)面局部可以滾動(dòng)，但是由于微信瀏覽器整個(gè)頁(yè)面可以拉伸，導(dǎo)致頁(yè)面內(nèi)部的滾動(dòng)體驗(yàn)不好。所以我們可以把整個(gè)頁(yè)面的滑動(dòng)事件給禁用掉，然后讓頁(yè)面的某一個(gè)區(qū)域可以正常的滑動(dòng)，就可以達(dá)到我們理想的效果。

具體實(shí)現(xiàn)法案如下：

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'));// 需要滾動(dòng)的區(qū)域類名：如：.scroll

const wrap = document.querySelector('.wrap'); //頁(yè)面最外層的類名如：.wrap

wrap.addEventListener('touchmove', function(evt) {

if (!evt._isScroller) {

evt.preventDefault();

}

}, { passive: false });

總結(jié)

以上是生活随笔為你收集整理的html微信窗口阻止滚动条,解决微信浏览器页面可以随意拉伸，导致页面内部滚动条滚动体验不好的问题...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。