禁用ios浏览器页面上下滚动回弹效果

最新推荐文章于 2024-01-30 11:34:36 发布

_平凡的自我_

最新推荐文章于 2024-01-30 11:34:36 发布

阅读量1.1w

点赞数

分类专栏： js 移动端文章标签： js 移动端

本文链接：https://blog.csdn.net/zhh123sy001/article/details/86591264

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

移动端

1 篇文章 0 订阅

订阅专栏

网上找了各种方案测试都有各种问题，最后整理一个完整亲测有效的方案分享出来

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>Demo</title>
    <style>
      	html,body{
			width: 100%; height: 100%; position: fixed;top:0;left:0;  
		}
		.box{
			height:100%;
		}
		.scroll{
			height:100%;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
    </style>
  </head>
  <body>
  	<div class="box">
	    <div class="scroll" id="scroll">
	    	<div id="test">测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试222</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试333</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    	<div>测试444</div>
	    </div>
    </div>
    <script>
		var ios = navigator.userAgent.indexOf('iPhone');//判断是否为ios
		if(ios != -1){  
		    //ios下运行
		    var scroll = document.getElementById("scroll")//你需要滑动的dom元素
		    touchScroll(scroll);
		}
		 
	 	var canScroll = true;
		function touchScroll(el) {
			canScroll = false;
		    //el需要滑动的元素
		    el.addEventListener('touchmove',function(e){
		        canScroll = true;
		    })
		    document.body.addEventListener('touchmove',function(e){
// 		    	alert(canScroll);
		        if(!canScroll){
		            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防止阻止默认事件不生效
		}
    </script>
  </body>
</html>