第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > html微信窗口阻止滚动条 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)...

html微信窗口阻止滚动条 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)...

时间:2021-08-01 05:18:07

相关推荐

html微信窗口阻止滚动条 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)...

此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});

OR

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

但这样往往会把页面原生的scroll效果也一同去掉了 也就是说所有都无法滚动了,下面的代码可以完美解决这个问题:

var overscroll = function(el) {

el.addEventListener('touchstart', function() {

var top = el.scrollTop

, totalScroll = el.scrollHeight

, currentScroll = top + el.offsetHeight;

//If we're at the top or the bottom of the containers

//scroll, push up or down one pixel.

//

//this prevents the scroll from "passing through" to

//the body.

if(top === 0) {

el.scrollTop = 1;

} else if(currentScroll === totalScroll) {

el.scrollTop = top - 1;

}

});

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

//if the content is actually scrollable, i.e. the content is long enough

//that scrolling can occur

if(el.offsetHeight < el.scrollHeight)

evt._isScroller = true;

});

}

overscroll(document.querySelector('.scroll'));

document.body.addEventListener('touchmove', function(evt) {

//In this case, the default behavior is scrolling the body, which

//would result in an overflow. Since we don't want that, we preventDefault.

if(!evt._isScroller) {

evt.preventDefault();

}

});

-06-27 更新

一个更简洁的方法

function stopDrop() {

var lastY;//最后一次y坐标点

$(document.body).on('touchstart', function(event) {

lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。

});

$(document.body).on('touchmove', function(event) {

var y = event.originalEvent.changedTouches[0].clientY;

var st = $(this).scrollTop(); //滚动条高度

if (y >= lastY && st <= 10) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。

lastY = y;

event.preventDefault();

}

lastY = y;

});

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。