如何在 iOS 上获取带有 CSS 溢出的滚动条 [英] How to get the scroll bar with CSS overflow on iOS

问题描述

开发 iPad 网站我尝试使用 CSS 属性 overflow: auto 来获取 div 中需要的滚动条，但我的设备甚至拒绝显示它们如果两个手指滚动正常.

我试过

溢出:自动；

和

溢出:滚动；

结果是一样的.

我只在 iPad 上进行测试(在桌面浏览器上运行完美).

有什么想法吗?

解决方案

Edit 按照留下的评论，好心地由

---

原始答案，留给后人.

不幸的是，overflow: auto 或 scroll 都不会在 iOS 设备上生成滚动条，这显然是由于屏幕宽度会占用这种有用的机制.

相反，正如您所发现的，用户需要执行两指滑动才能滚动 overflow 编辑的内容.唯一的参考，因为我找不到手机本身的手册，我可以在这里找到:tuaw.com:iPhone 101:双指滚动.

我能想到的唯一解决方法是，您是否可以使用一些 JavaScript，也许是 jQTouch，为 overflow 元素创建自己的滚动条.或者，您可以使用 @media queries 删除 溢出 并完整显示内容，作为 iPhone 用户，这得到了我的投票，即使只是为了纯粹的简单.例如:

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

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

Developing an iPad website I tried to use the CSS property overflow: auto to get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.

I tried with

overflow: auto;

and

overflow: scroll;

and the result is the same.

I'm only testing on an iPad (on desktop browsers works perfectly).

Any ideas?

解决方案

Edit following the comment left, kindly, by kritzikratzi:

[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touch can be added which should result in the expected behaviour.

Some, but very little, further reading:

• Native momentum scrolling in iOS 5

---

Original answer, left for posterity.

Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.

Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.

The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflow elements. Alternatively you could use @media queries to remove the overflow and show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:

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

The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css", but I assume there are reasons.

这篇关于如何在 iOS 上获取带有 CSS 溢出的滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！