此类事件是手机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();
}
});
$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
这种是最坑爹的答案,虽然是把下拉弹性效果禁止了,可是也把页面里的滚动条禁止了,导致网页不能滚屏。
经过了解。微信下拉弹性效果其实是浏览器本身的一种特性,为什么浏览器的设计者要设计这种特性暂不可知,知道的朋友们麻烦告诉我一声哈。
而下拉回弹是touchmove事件的一种默认属性,根据这个,只要禁止浏览器最底层box(也就是body)的touchmove事件,就不会回弹了,于是乎就有了上面那种只图一时之快不负责的代码。
既然touchmove事件不能禁用,但有时又不能生效,于是笔者想到一种方法 ,如果页面滚动条在最顶部的时候,禁止下拉,反之允许下拉,这个问题不就顺利解决啦?于是乎有了下面代码:
/**
* 禁止浏览器下拉回弹
*/
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;
});
}
只需要在网页加载完后立即执行此函数,就可以较完美地实现阻止网页回弹。当然,只是较完美,还不是完美。因为我发现,当网页进入出现下拉回弹效果时,手指不放开再往下拉,坑爹地这时候竟然不是touchmove事件了,而是没有事件!
好吧,浏览器设计者深埋雷,我们就边踩边挖吧,各前端狗们,大家共勉!