如何在iOS上使用CSS溢出获取滚动条

开发iPad网站时，我尝试使用CSS属性overflow: auto获取滚动条（如果需要）div，但是即使两个手指滚动正常，我的设备也拒绝显示滚动条。

我尝试过

overflow: auto;

和

overflow: scroll;

结果是一样的。

我仅在iPad上进行测试（在桌面浏览器上可以正常运行）。

有任何想法吗？

请按照kritzikratzi留下的评论进行编辑：

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

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

• iOS 5中的原生动量滚动

原始答案，留给后代使用。

不幸的是overflow: auto，没有scroll在iOS设备上产生滚动条，这显然是因为屏幕宽度会占用这种有用的机制。

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

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

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

前面的代码来自A List Apart，来自上面链接到同一篇文章（我不确定它们为什么离开type="text/css"，但我认为是有原因的。

在您的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);
}

我做了一些测试，并使用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上的滚动条进行交互，但是您可以与内容进行交互以对其进行滚动

克里斯·巴尔（Chris Barr）在这里给出的解决方案

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上的其他2个人提出了可能的仅CSS解决方案。David Thomas的解决方案是完美的，但局限性在于滚动条仅在滚动时才可见。

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

• 如何防止WebKit / Blink中的OS X触控板用户隐藏滚动条？
• CSS-溢出：滚动；-总是显示垂直滚动条吗？

确保您的身体和div没有

  position:fixed

否则它将无法正常工作

以我的经验，您需要确保该元素已display:block;申请-webkit-overflow-scrolling:touch;工作。

对我来说效果很好，请尝试：

.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代码；

如果您尝试通过移动设备上的触摸实现水平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/