问题:web页面在Android和PC浏览器可以滚动,在iOS端不能滚动。这里的iOS不是iphone的safari浏览器,而是iOS端打包的APP内不能滚动。
网上的一些解决方法:
为overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch
给子元素设置最小高度: min-height 或者设置子元素高度 height:calc
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> html, body { height: 100%; } body { display: flex; } .div-outer { overflow: scroll; -webkit-overflow-scrolling: touch; } </style> </head> <body> <div class="div-outer"> <!---code...--> </div> </body> </html>
解决方法:设置网页高度100%,然后使用flex布局。子元素的voerflow:scroll属性增加 -webkit-overflow-scrolling: touch
end.
其中原理这篇讲的通透:https://segmentfault.com/a/1190000012761272
此bug出现需要条件:父元素需使用绝对定位absolute或固定定位fixed,使用overflow: scroll / auto(或overflow-y: scroll / auto),内部子元素是动态大小(例如较大的svg document,近似为内嵌iframe,等等)。
bug出现原因:没有相关官方文档描述该bug。在查阅文档及自己测试的时候总结:iOS safari 会将overflow:scroll的元素识别为一个单独的 ScrollView,并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页本身就是一个大的ScrollView,在脱离文档流的定位时,子元素的高度如果没有在ScrollView建立之前确定,就不会触发内部滑动,而会触发外部滑动。
关于 -webkit-overflow-scrolling:Safari CSS Reference官方是这样描述的:
Specifies whether to use native-style scrolling in an overflow:scroll element.
即该属性会让overflow:scroll的元素拥有像iOS原生一样顺滑的滑动效果。为了实现此目标,safari将所有overflow:scroll的元素用原生创建一个ScrollView,当-webkit-overflow-scrolling属性为touch时,启用硬件加速,出现顺滑效果。
据以上分析以及大量测试得出完美解决方法为:
原文:https://www.cnblogs.com/sener/p/15128778.html