完美解决H5滚动滑动穿透方案:不使用系统滚动
网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。
今天终于找到了滚动穿透的原因和完美解决的办法
原因:
使用系统的滚动,html和body的高度超出窗口的高度,自动使用系统滚动,这个滚动会导致滚动穿透。
完美解决方案:
1.在body下的div上使用自己的height:100%; overflow: auto/scoll; (在IOS上不流畅需要加 :-webkit-overflow-scrolling: touch;)
2.给html,body 增加{posation:fixed;with100%;height:100%; } 使html,body不会再使用系统滚动;
感触:H5开发时有些系统默认功能总会带来一些未知的坑,功能总是不尽如人意,尽量自己多写一写css使样式控制在自己的计划内。
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!