如何在 iOS 上获取带有 CSS 溢出的滚动条

发布于10月02日

在开发一个iPad网站时，我曾try 使用CSS属性overflow: auto来获取div中所需的滚动条，但我的设备拒绝显示它们，即使两个手指滚动正常.

我试着用

overflow: auto;

和

overflow: scroll;

和 the result is the same.

我只在iPad上测试(在桌面浏览器上运行良好).

有什么主意吗？

推荐答案

Edit以下是kritzikratzi人留下的 comments :

[从iOS5beta开始]可以添加一个新的属性-webkit-overflow-scrolling: touch，这应该会导致预期的行为.

一些，但很少有进一步的阅读:

Original answer，留给子孙后代.

不幸的是，无论是overflow: auto还是scroll，都不会在iOS设备上产生滚动条，显然是因为屏幕宽度会占用如此有用的机制.

取而代之的是，正如你已经发现的，用户需要用两个手指滑动才能滚动overflow页的内容.唯一的参考，因为我找不到手机本身的手册，我能找到的是这里:tuaw.com: iPhone overflow: Two-fingered scrolling.

我能想到的唯一解决办法是，如果你能使用一些JavaScript，或者jQTouch，为overflow个元素创建你自己的滚动条.或者，你可以用@media queries删除overflow并完整显示内容，作为iPhone用户，这会得到我的投票，如果只是为了简单起见.例如:

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

前面的代码来自A List Apart，来自与上面链接的同一篇文章(我不确定他们为什么离开type="text/css"，但我认为这是有原因的).

实用课程推荐