如何在iOS上获取CSS溢出的滚动条
开发一个iPad网站我试图使用CSS属性overflow: auto获取滚动条，如果需要在一个div ，但我的设备拒绝显示他们，即使两个手指滚动工作。
我试着用
overflow: auto;
和
overflow: scroll;
结果是一样的。
我只在iPad上进行testing（在桌面浏览器上完美工作）。
有任何想法吗？
编辑下面留下的评论，亲切，由kritzikratzi ：
[开始]与IOS5Beta一个新的属性
-webkit-overflow-scrolling: touch可以被添加应该导致预期的行为。
一些，但很less，进一步阅读：
- 本机在iOS 5中滚动
原来的答案 ，留给子孙后代。
不幸的是，无论是overflow: auto还是scroll ，在iOS设备上都不会产生滚动条，这显然是由于屏幕宽度会占用这些有用的机制。
相反，如您所见，用户需要执行双指滑动才能滚动overflow内容。 唯一的参考，因为我无法find手机本身的手册，我可以find在这里： tuaw.com：iPhone 101：双指滚动 。
唯一可以考虑的方法是，如果你可能使用一些JavaScript，也许是jQTouch，为overflow元素创build你自己的滚动条。 或者，您可以使用@media查询来删除overflow并完整显示内容，因为iPhone用户可以获得我的投票，只是为了简单。 例如：
<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />
前面的代码来自A List Apart ，从上面链接的同一篇文章（我不知道为什么他们离开了type="text/css" ，但我认为是有原因的。
我已经做了一些testing，并使用CSS3重新定义滚动条的作品，你得到保持你的Overflow:scroll; 或Overflow:auto
我结束了这样的事情…
::-webkit-scrollbar { width: 15px; height: 15px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #C3C3C3; border: 2px solid #eee; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); }
唯一不能解决的问题是如何与iProducts上的滚动条进行交互，但是您可以与内容交互来滚动它
应用这个代码在你的CSS
::-webkit-scrollbar{ -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0,0,0,.5); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); }
Chris Barr 在这里给出的解决scheme
function isTouchDevice(){ try{ document.createEvent("TouchEvent"); return true; }catch(e){ return false; } } function touchScroll(id){ if(isTouchDevice()){ //if touch events exist... var el=document.getElementById(id); var scrollStartPos=0; document.getElementById(id).addEventListener("touchstart", function(event) { scrollStartPos=this.scrollTop+event.touches[0].pageY; event.preventDefault(); },false); document.getElementById(id).addEventListener("touchmove", function(event) { this.scrollTop=scrollStartPos-event.touches[0].pageY; event.preventDefault(); },false); } }
为我工作得很好。 删除event.preventDefault，如果你需要使用一些点击…
iScroll4 JavaScript库将解决它。 它有一个hideScrollbar方法，您可以将其设置为false以防止滚动条消失。
SO上的其他两个人提出了可能的CSS解决scheme。 大卫托马斯的解决scheme是完美的，但有限制，只有在滚动期间可见滚动条。
为了使滚动条始终可见，可以遵循以下链接中build议的准则：
- 如何防止WebKit / Blink中的OS X轨迹板用户隐藏滚动条？
- CSS – 溢出：滚动; – 总是显示垂直滚动条？
确保你的身体和divs没有
position:fixed
否则它不会工作
根据我的经验，您需要确保元素具有display:block; 申请了-webkit-overflow-scrolling:touch; 上class。
如果您尝试通过触摸移动设备实现横向div滚动 ，则更新后的CSS修补程序不起作用（在Android Chrome和iOS Safari多个版本上进行testing），例如：
-webkit-overflow-scrolling: touch
我find了一个解决scheme，并修改了从CSS技巧之前的水平滚动。 我已经在Android Chrome和iOS Safari上进行了testing，听众触摸事件已经存在了很长时间，所以它有很好的支持： http : //caniuse.com/#feat=touch 。
用法：
touchHorizScroll('divIDtoScroll');
function：
function touchHorizScroll(id){ if(isTouchDevice()){ //if touch events exist... var el=document.getElementById(id); var scrollStartPos=0; document.getElementById(id).addEventListener("touchstart", function(event) { scrollStartPos=this.scrollLeft+event.touches[0].pageX; },false); document.getElementById(id).addEventListener("touchmove", function(event) { this.scrollLeft=scrollStartPos-event.touches[0].pageX; },false); } } function isTouchDevice(){ try{ document.createEvent("TouchEvent"); return true; }catch(e){ return false; } }
从垂直解决scheme修改（前CSS技巧）：
http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/
为我工作正常，请尝试：
.scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; }
::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #C3C3C3; border: 2px solid #eee; }
使用这个代码，它可以在ios / android APP webview中使用; 它删除了一些不便携的CSS代码;