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

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

<!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');//判断是否为iosif(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>

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

html关闭ios橡皮筋效果,禁止ios浏览器页面上下滚动 (橡皮筋效果)
在ios任何版本的浏览器(包括ios微信内置的浏览器),滚动页面的时候会出现整个页面上下滚动的效果(百度说是橡皮筋效果),虽然不耽误使用,但是让人心烦,所以要禁止掉这个行为. 有两种方法可以解决这个问 ...
小程序IOS页面下拉回弹效果
小程序IOS页面下拉回弹效果小程序在ios系统上的橡皮筋回弹效果,是ios特有的,目前小程序没有特有的方法去控制.根据业务需求不想要这个回弹的效果,故此记录一下解决方案: 方案一:当页面内容比较 ...
android界面布局错位,IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器页面布局错位(如:点不到)的分析与解决 IOS 浏览器软键盘的拉起与收缩.微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素): 明明按钮在这里, ...
html回弹效果,CSS 实现移动设备滚动回弹效果_html/css_WEB-ITnose
-webkit-overflow-scrolling 属性控制元素在移动设备上具有滚动回弹效果 Saferi 对于存在该属性的网页,会创建一个UIScrollView 提供子layer给渲染模块使用 ...
阻止苹果xs max浏览器页面整体滚动
今天发现一个神奇的现象,在苹果xs max型号手机上滑动一个列表页面,整个页面(包括顶部fix的头组件)都在滑动,网上称之为橡皮筋效果. 页面的滚动看起来比较乱,其实知道原理可以分析出: 外层的滚动( ...
禁止ios浏览器页面滚动的橡皮筋效果
问题:在做手机端,通过拖拽调整某个div大小时,拖拽引起了整体页面的弹动方法一:通过css设置body宽高 html, body {width: 100%;height: 100%;overflow ...
vue中禁止ios浏览器页面滚动的橡皮筋效果
mounted () {document.addEventListener('touchmove', function (e) {e.preventDefault() // 阻止默认的处理方式(阻止下 ...
禁用IOS手机页面数字自动识别为手机号
最近开发一个H5的项目,发现页面元素为一串数字时,评估手机会默认显示成蓝色字体,并且添加下划线,点击数字时会提示是否识别为手机号. 解决此问题的方法很简单,在head标签中添加下面的meta标记即可解 ...
css3属性：美化表单、点击元素产生的背景与边框怎么去掉，滚动回弹效果
转载于:https://www.cnblogs.com/pengchengzhong/p/6371351.html

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

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

最新文章

热门文章