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

一首弦曲献仙音

已于 2023-03-07 10:56:43 修改

阅读量813

点赞数

分类专栏： H5 APP开发文章标签：前端 javascript 开发语言 Powered by 金山文档

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

本文链接：https://blog.csdn.net/qq_42660374/article/details/129377978

版权

H5 APP开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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

-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>