现象描述:给html元素设定了overflow: auto;后,当元素内部内容较多时会出现滚动条,这个滚动条在安卓机里滚动很正常,但是在iOS机里就显得很不丝滑了,滑哪停哪(iOS软件内嵌页面和iOS微信客户端内都存在这个现象)。经测试,在该html元素对应样式的overflow: auto;的下面加一句-webkit-overflow-scrolling: touch;即可解决问题。
目录
在Safari CSS Reference页面里有对这个css属性进行介绍:
描述:指定是否对设定样式 overflow:scroll 的元素使用类似IOS原生的滚动条滚动效果。
可选值:
- auto:单手滚动(不带动量);
- touch:类似原生的滚动效果(自带一堆效果,如透明、遮罩、transform转变);
- 默认值为auto。
可用性:适用于iOS 5.0及之后的版本。
说明:
经实测,-webkit-overflow-scrolling: touch;这个样式除了像文档中说的那样对 overflow:scroll 的元素有效外,对 overflow:auto的元素也是有效的。
另外需要注意的是,如果你的页面上有position; fixed定位的元素的话,-webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位(滑动结束后会复位)的现象,所以改完样式后记得在真机上测一下。
参考:
- https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling
-webkit-overflow-scrolling: touch元素滚动时可能会出现position: fixed元素短暂错位
请问有解决方案吗?
感觉并没有什么好办法,我已经弃掉这个方案了,尽量少嵌套scroll元素
这个是适用于没有跟position: fixed元素同时出现的场景