移动端 H5 滑动穿透 (完美解决) |
您所在的位置:网站首页 › h5页面滑动切换 › 移动端 H5 滑动穿透 (完美解决) |
移动端H5 的滑动穿透问题 很是让人头疼 网上找了各种解决方案 都不是很完美, 于是自己 想了各种办法 终于决解了 (暂时未发现BUG) 首先滑动 穿透的分类 一 给body加 超出隐藏 这种情况的小伙伴 简单的将 body 来个 overflow: hidden; 即可解决, 弊端:当你 往下滑动了 很多后 overflow: hidden 将会把页面 返回顶部; 二 阻止滑动事件 当弹出层出来的 时候 禁止掉 默认的滑动事件 document.querySelector('body').addEventListener('touchmove', function (event) { event.preventDefault(); });弊端:当你弹出层 也需要滑动时 将无法滑动; 三 完美解决 方案 1,不要用系统默认的超出滑动 也就是说 你要自己写个 DIV 让其 overflow: scroll;(避免系统默认的 滑动事件) 2,整个 html 要用 position: fixed; 禁止用户用的(不禁止 会影响体验); 3,如此设计后 你会发现 滑动穿透 已经好了 因为你根本没有用系统的 滑动,所以不会穿透,可是万恶的 IOS 来搞事情了,滑动会 没有惯性,用起来很不爽,于是在网上找到 -webkit-overflow-scrolling : touch;这个代码 是加惯性的 ,加上后惯性是好了,但是穿透问题又出来了,所以我们要在 弹出层出来的时候 去掉这个属性,就不会穿透 弹出层消失的 时候在增加这个属性 就可以有惯性了,至此 完美解决 4 有任何问题 随时留言 大家共同学习 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |