将滚动条添加到 iPad 和 iPhone 的 div 的最佳方法是啥？

Posted 2023-03-12

【中文标题】将滚动条添加到 iPad 和 iPhone 的 div 的最佳方法是啥？

【英文标题】：What is the best way to add a scrollbar to a div for iPad and iPhone?将滚动条添加到 iPad 和 iPhone 的 div 的最佳方法是什么？

【发布时间】：2011-09-04 00:00:22

【问题描述】：

目前，当内容大于 div 的高度时，我正在为 div 使用垂直滚动条。这适用于 Chrome、IE 7(!) 和 Firefox。

但是，在 iPad 和 iPhone 等 ios 设备上，没有用于 div 的滚动条。推荐的解决方案是什么？为简单起见，我想在所有平台上运行相同的代码：Chrome、IE 7+、Firefox、iPhone 和 iPad。

谢谢！

【参考方案1】：

实际上在 iOS 中有一个元素内滚动条，它只是隐藏起来直到它被使用:( 你使用两指拖动来激活一个元素的滚动。

我认为您不能覆盖隐藏滚动条的操作系统，但 css 中的 overflow-y: scroll; 很可能是您想要的。

【讨论】：

我对此有所启发。谢谢！

好的，两个手指的东西有效。谢谢。接下来我将尝试强制显示滚动条。

我实现了 iScroll 4 (cubiq.org/iscroll-4)，这似乎是一个开发良好的解决方案，但它不起作用，因为： 1. 破坏了 Chrome 上的默认滚动条功能。 2. iPad 页面上滚动条显示位置不正确。我想我需要更改 CSS 才能使其正常工作。在这种情况下，IOS 设备可能会有单独的 CSS，这对我来说不是一个好的解决方案。

您是否尝试过为 media="mobile" 制作特定的 CSS 表单？这将仅用于移动设备。否则，您可以尝试使用 css3 媒体查询：css3.info/preview/media-queries 手机通常是最新的，因此它们可能支持大部分 css3。