如何在 iOS 上获取带有 CSS 溢出的滚动条

在 kritzikratzi 留下的评论之后编辑：

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

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

iOS 5 中的原生动量滚动

https://i.stack.imgur.com/gYiEv.png

原始答案，留给后代。

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

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

我能想到的唯一解决方法是，您是否可以使用一些 JavaScript，或者 jQTouch，为 overflow 元素创建您自己的滚动条。或者，您可以使用 @media queries 删除 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 给出的解决方案here

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 以防止滚动条消失。

---

根据我的经验，您需要确保元素已申请 display:block; 才能使 -webkit-overflow-scrolling:touch; 工作。

---

SO上的其他2个人提出了可能的纯CSS解决方案。 David Thomas 的解决方案是完美的，但存在滚动条仅在滚动期间可见的限制。

为了让滚动条始终可见，可以遵循以下链接中建议的指南：

如何防止在 WebKit/Blink 中为 OS X 触控板用户隐藏滚动条？

CSS - 溢出：滚动； - 总是显示垂直滚动条？

---

确保你的 body 和 div 没有

  position:fixed

否则它不会工作

---

对我来说很好，请尝试：

.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/

---