Cube UI 的 Popup 组件在 iOS 上无法滚动怎么办?

Prog.智玲 阅读 3

我在用 Cube UI 的 Popup 组件时,发现内容多了在 iOS 设备上根本滚不动,安卓倒是正常。试过加 overflow-y: auto 也没用,是不是要加什么特殊样式?

这是我的代码:

<cube-popup v-model="showPopup">
  <div class="popup-content">
    <div v-for="item in longList" :key="item.id">{{ item.name }}</div>
  </div>
</cube-popup>

对应的 CSS 是:

.popup-content {
  height: 300px;
  overflow-y: auto;
}
我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
宇文静静
啊,iOS的滚动问题老熟人了。这其实是WebKit的一个经典坑,需要加个-webkit-overflow-scrolling: touch来启用弹性滚动。

试试这样改CSS:
.popup-content {
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}


如果还不行,可能需要给外层容器也加上这个属性。有时候iOS需要双重保险:
.cube-popup {
-webkit-overflow-scrolling: touch;
}


顺便吐槽下,这种平台差异真是烦人,每次都要为iOS写特殊样式。不过这样改完应该就能滚动了,比单纯加overflow-y靠谱多了。
点赞
2026-03-08 16:01