《H5 App开发》苹果机没有滚动条、滚动卡顿解决方案

原创已于 2023-03-07 10:56:43 修改 · 984 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-03-07 10:54:44 首次发布

H5 APP开发专栏收录该内容

8 篇文章

订阅专栏

在移动端开发中，遇到一个问题：安卓设备显示滚动条并可滑动，但苹果设备没有滚动条且无法滑动。通过在CSS中添加`-webkit-overflow-scrolling:touch;`属性，解决了苹果手机的滚动条问题，此属性仅适用于iOS系统。示例代码中展示了如何应用这个属性到固定定位的div及iframe元素上，以实现流畅的滚动效果。

在我们移动端，安卓手机正常显示滚动条，并且可以滑动，但是苹果手机却没有滚动条，并且不能滑动，解决方案如下：

-webkit-overflow-scrolling: touch;

注意：谷歌浏览器不支持此方法，只有ios支持

<style>
　　div {
　　　　position: fixed;
　　　　left: 0;
　　　　right: 0;
　　　　top: 0;
　　　　bottom: 0;
　　　　-webkit-overflow-scrolling: touch;  /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
　　　　overflow-y: scroll;
　　}

　　iframe {
　　　　width: 100%;
　　　　height: 100%;
　　}
</style>
 
<body>
　　<div>
　　　　<iframe frameborder="0" src="gamelist.html" name="lobby" scrolling="yes"></iframe>
　　</div>
</body>