如何在 iOS 上获得 CSS 溢出的滚动条

开发一个 iPad 网站我尝试使用 CSS 属性 overflow: auto来获得滚动条，如果需要在 div，但我的设备是拒绝显示他们，即使两个手指滚动是工作。

我试过了

overflow: auto;

还有

overflow: scroll;

结果是一样的。

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

有什么想法吗？

158079 次浏览
小开
最佳答案

按照 Kritzikratzi留下的评论，编辑 :

从 ios 5beta 开始，可以添加一个新的属性 -webkit-overflow-scrolling: touch，它应该会导致预期的行为。

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

原答案 ，留给后人。

不幸的是，无论是 overflow: auto还是 scroll，都不能在 iOS 设备上生成滚动条，这显然是由于屏幕宽度会占据如此有用的机制。

相反，正如您所发现的，为了滚动 overflow-ed 内容，用户需要执行双指滑动操作。唯一的参考，因为我无法找到手机本身的手册，我可以找到这里: Tuaw.com: iPhone 101: 两指滚动。

对于这个问题，我能想到的唯一解决办法是，是否可以使用一些 JavaScript，或者 jQTouch，为 overflow元素创建自己的滚动条。或者，你可以使用 @ 媒体查询删除 overflow，并显示完整的内容，作为一个 iPhone 用户，这得到了我的投票，如果只是为了纯粹的简单性。例如:

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

前面的代码来自于 分开列表，来自于上面链接到的同一篇文章(我不知道他们为什么离开了 type="text/css"，但我假设有原因。

小开

IScroll4 javascript 库将立即修复它。它有一个 hideScrollbar方法，您可以将其设置为 false，以防止滚动条消失。

小开

解决方案由克里斯巴尔 给你给出

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);
}
}

对我来说很好用。如果你需要使用一些点击，删除事件。

小开

根据我的经验，您需要确保元素的 display:block;应用于 -webkit-overflow-scrolling:touch;的工作。

小开

其他2个人在 SO 提出了可能的 CSS-only 解决方案的问题。DavidThomas 的解决方案是完美的，但有滚动条只能在滚动过程中可见的限制。

为了使滚动条始终可见，可以遵循以下链接中建议的准则:

小开

我已经做了一些测试和使用 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);
}
小开

确保你的身体和潜水员没有

  position:fixed

否则就没用了

小开

如果你想在手机上实现 水平 div滚动，那么更新后的 CSS 修复程序不起作用(在 Android Chrome 和 iOS Safari 的多个版本上测试过) ，例如:

-webkit-overflow-scrolling: touch

我找到了一个解决方案，并修改了它的水平滚动之前的 CSS 技巧。我已经在 Android Chrome 和 iOS Safari 上测试过它，而且听众触摸事件已经存在很长时间了，所以它有很好的支持: http://caniuse.com/#feat=touch。

用法:

touchHorizScroll('divIDtoScroll');

职能:

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;
}
}

从垂直解决方案(前 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 代码;


提交答案