1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > html关闭ios橡皮筋效果 禁止ios浏览器页面上下滚动 (橡皮筋效果)

html关闭ios橡皮筋效果 禁止ios浏览器页面上下滚动 (橡皮筋效果)

时间:2024-04-27 18:49:33

相关推荐

html关闭ios橡皮筋效果 禁止ios浏览器页面上下滚动 (橡皮筋效果)

在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为。

有两种方法可以解决这个问题:(推荐使用第二种方法)

1.用fixed定位来解决

解决思路:这个就是把html,body设置width: 100%; height: 100%; position: fixed;top:0;left:0;

注意问题:测试在微信内生效,嵌入到webview中失效,其他还没测,测好了在更。

2.阻止body的touchmove事件

但是事件是冒泡的,阻止了body的touchmove事件,如果其他有元素需要滑动该怎么办呢?

解决思路:1.首先给需要滑动的元素加一个touchmove事件,事件触发的时候给event设置一个属性isSCROLL为true;

2.然后给body加touchmove事件,触发事件时判断event的isSCROLL属性是否为true,否的话就禁止默认事件

3.是的话代表点击的事件源为需要滑动的元素,判断其滑动的最高点和最低点加一个限制就ok了,类似碰壁反弹

var ios = navigator.userAgent.indexOf('iphone');//判断是否为ios

if(ios == -1){

//ios下运行

var divEl = ....//你需要滑动的dom元素

iosTrouchFn(divEl);

}

function iosTrouchFn(el) {

//el需要滑动的元素

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

e.isSCROLL = true;

})

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

if(!e.isSCROLL){

e.preventDefault(); //阻止默认事件(上下滑动)

}else{

//需要滑动的区域

var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离

var scrollH = el.scrollHeight; //含滚动内容的元素大小

var offsetH = el.offsetHeight; //网页可见区域高

var cScroll = top + offsetH; //当前滚动的距离

//被滑动到最上方和最下方的时候

if(top == 0){

top = 1; //0~1之间的小数会被当成0

}else if(cScroll === scrollH){

el.scrollTop = top - 0.1;

}

}

}, {passive: false}) //passive防止阻止默认事件不生效

}

最后写一点passive 是addEventListener最后改版的参数,如果想了解的话给大家推个链接

/ziyunfei/p/5545439.html

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