html游戏禁止微信浏览器下拉,微信H5禁止下拉 且可下滚动指定区域

var app = document.getElementsByClassName("tree-hole-room-messages")[0];

var touchstartY;

app.addEventListener(

"touchstart",

function(event) {

console.log(1);

var events = event.touches[0] || event;

touchstartY = events.clientY; //获取触摸目标在视口中的y坐标

},

false

);

app.addEventListener(

"touchmove",

function(event) {

var events = event.touches[0] || event;

//注意app.scrollTop始终为0

var scrollTop = app.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度

var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度(可视部分高度)

var scrollHeight = app.scrollHeight; //所有内容的高度

if (

events.clientY > touchstartY &&

scrollTop === 0 &&

event.cancelable

) {

event.preventDefault(); //禁止到顶下拉

} else if (

scrollTop + clientHeight > scrollHeight &&

event.cancelable

) {

// event.preventDefault(); //禁止到底上拉

}

},

false

);

代码实现在tree-hole-room-messages这个滚动区域内下拉不会出现。

且可用滚动这个区域

原文：https://www.cnblogs.com/saving/p/11186460.html