如何在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代码;