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

问题描述

开发iPad网站我试图使用CSS属性 overflow：auto 在 div



我尝试使用

，但我的装置拒绝显示

  overflow：auto; 
  

和

  overflow：scroll; 
  

，结果相同。

我只是在iPad上测试（在桌面浏览器上工作完美）。

任何想法？

解决方案

>按照

---

原始答案，留给后代。

code> overflow：auto 或 scroll 在iOS设备上生成滚动条，显然是由于屏幕宽度

相反，如您所见，用户需要执行双指滑动才能滚动溢出的内容。唯一的参考，因为我无法找到手机本身的手册，我可以找到在这里： tuaw.com：iPhone 101：双指滚动。

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

 < link rel =stylesheethref =handheld.cssmedia = -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屋！