墨绿

解决移动端滚动穿透问题的一个接近完美的方法

2017.12.26 22:51:59 Tuesday 163 views

最近在做新版主题开发的时候遇到了糟心的问题,就是当左侧的侧滑式菜单弹出展开时,在屏幕上滑动菜单的内容,底部的内容也会跟着一起滑动,这个体验很不友好,其实已经通过 JS 对触摸事件做处理了,但是当菜单内的滚动需要保持时,菜单内的内容滑倒底部或顶部时还是会引起底层的滚动,在电脑端可以直接通过 overflow:hidden 来禁止滚动条从而达到不可滚动的效果,但是在移动端,是基于触摸事件的,这个办法不兼容,后来在网上找资料得知这个现象被称为滚动穿透,有很多大神对这个问题进行了分析提出来各种不同的解决方案。

我也是跟着教程不断的摸索、测试,一遍又一遍的修改,终于在前几天的一个晚上,找到了一个可行的办法解决这个问题,下面是解决方案:

当菜单展开时,给 body 添加 overflow:hidden 的同时再添加 position:fixed,使其绝对定位固定在顶部,此时底层就不会滑动了,但是导致的问题就是页面会跳到顶部,解决跳转到的顶部的方案是获取当前页面滚动条的位置,然后赋值给 body 的 top(需要加上负号),这时当导航菜单展开时页面不会跳到顶部,但是当菜单隐藏时又跳到顶部了,这就还要做一个处理。当菜单隐藏时通过 JS 获取 body 的 top 值,然后转为正数,赋值给变量使页面滚动到之前的位置。

经过一番折腾终于算是把这个问题解决了,重点来了,虽然以上思路能解决这个问题,但是会导致一个小小的问题,作为有点强迫症的人是不能忍的,就是当菜单展开时虽然不会再跳到顶部,但是偶尔会出现大约 2 像素的偏移,微微的跳动一下,这看起来还是有点扎眼的,就在我纠结于这个问题的时候,我发现了另一个解决这个问题的方案……

只需要在 body 内单独加一个 div 把所有元素包起来,然后给这个 div 设置如下样式:

style=”position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto”

就可以让底层在菜单展开并且有内容滚动时不跟着滚动了,而且也不会出现 2 像素的偏移,这算是一个完美的解决方案解决移动端的滚动穿透问题,相比那些用一大段 JS 来各种运算、赋值、判断解决的方法,这个办法真的是超级好用,于是我果断的删除了前面的代码,用上了这个办法,有网友反应这种方式在苹果设备上会导致菜单的内容滚动呆滞,由于我还没有苹果设备,这个没有测试,欢迎大家反馈。

另外在折腾这个解决方案的同时我发现了一个神奇的样式:

-ms-overflow-style:none

这个样式竟然能够隐藏 IE 浏览器的滚动条!这个效果是我以前想实现一直没实现的,想到以前试图隐藏 IE 滚动条查到的方案都不靠谱时,我觉得这个样式真是神奇般的存在,于是果断把自己博客的滚动条隐藏了……

在折腾这些问题的时候,我越来越发现 CSS 与 JS 的强大,基本上出现的问题都有办法得到解决,也越来越感叹自己懂的技术还是太少了,学习的道路还很远。

亲爱的读者:本文结束了,非常感谢你的阅读。阅读是美意,分享是鼓励,如果觉得本站文章对你有用,请分享文章给你的朋友。你的支持将鼓励我继续创作。本站电脑版此前长期一段时间下线了评论功能,目前已经恢复了,如果需要评论请使用手机访问或直接在下方填写,我们万分期待看到你的留言。

你可以通过下方的评论模块与我们进一步交流,评论内容不会公开展示:


亲爱的用户你好,感谢您即将选择由星辰视觉特效工作室——简称星辰视效提供的服务,我们秉承高效率、优质量的理念竭诚为大家提供更好的服务,目前为止我们开拓了视频剪辑、专业调色、影视特效、平面设计、数字绘景、商务印刷、动画渲染、录音配乐等多种业务满足了客户的需要,随时随地欢迎您的咨询与合作,具体事项请及时联系客服微信:kaiwenchat。
同时我们也在全国范围内招募兼职业务员来推广我们的服务,只要你有信心有人脉都可以加入我们的队伍,通过你的介绍所获得的收益,你将取得丰厚的成交分佣,我们鼓励你把它作为一种业余的赚钱手段,具体的事宜还请微信咨询。
亲爱的用户你好,感谢您即将选择由星辰视觉特效工作室——简称星辰视效提供的服务,我们秉承高效率、优质量的理念竭诚为大家提供更好的服务,目前为止我们开拓了视频剪辑、专业调色、影视特效、平面设计、数字绘景、商务印刷、动画渲染、录音配乐等多种业务满足了客户的需要,随时随地欢迎您的咨询与合作,具体事项请及时联系客服微信:kaiwenchat。
提示:当前页面不支持阅读模式。

扫二维码添加微信

★ ★ ★ ★ ★

“感谢你的鼓励与陪伴,我们的坚持才有意义”

创新与发展 – 李开文博客保留所有权利 欢迎各界朋友与本站交换友情链接或在本站投放广告,如有合作意向请直接与站务联系

关于我们 体验新版 站内搜索 关于我们 推广代理 商务合作 淘宝店铺 分享海报 虚拟主机