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

Question

开发 iPad 网站时，我尝试使用 CSS 属性

overflow: auto

来获取滚动条（如果需要的话），但即使两根手指滚动正常工作，我的设备也拒绝显示它们。我尝试过

div

和

overflow: auto;

结果是一样的。

我只在 iPad 上进行测试（在桌面浏览器上运行完美）。

有什么想法吗？

Answer 1

编辑

遵循kritzikratzi留下的评论：

[开始]在 ios 5beta 中可以添加一个新属性

overflow: scroll;

，这应该会产生预期的行为。

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

iOS 5 中的原生动量滚动

---

原始答案

，留给后人。 不幸的是，

-webkit-overflow-scrolling: touch

或

overflow: auto

都不会在iOS设备上产生滚动条，这显然是由于屏幕宽度会占用如此有用的机制。相反，正如您所发现的，用户需要执行两指滑动才能滚动

scroll

内容。唯一的参考，因为我无法找到手机本身的手册，所以我可以在这里找到：

tuaw.com：iPhone 101：两指滚动

。 我能想到的唯一解决方法是，您是否可以使用一些 JavaScript（也许还有 jQTouch）来为

overflow

元素创建自己的滚动条。或者，您可以使用

@media requests

删除 overflow 并显示完整内容，作为 iPhone 用户，这得到了我的投票，即使只是为了纯粹的简单性。例如：overflow

前面的代码来自

A List Apart

，来自上面链接的同一篇文章（我不确定他们为什么离开<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" /> ，但我认为有原因。

Answer 2

type="text/css"

Answer 3

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

或

Overflow:scroll;

我最终得到了这样的结果......

Overflow:auto

我尚未弄清楚的唯一缺点是如何与 iProducts 上的滚动条交互，但您可以与内容交互以滚动它

Answer 4

这里

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

对我来说效果很好。如果您需要使用一些点击，请删除 event.preventDefault...

Answer 5

iScroll4

javascript 库将立即修复它。它有一个

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

方法，您可以将其设置为

hideScrollbar

以防止滚动条消失。

Answer 6

false

才能使

display:block;

正常工作。

Answer 7

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

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

Answer 8

-webkit-overflow-scrolling:touch;

不然不行

Answer 9

position:fixed

Answer 10

使用此代码，它可以在ios/android APP webview中运行；它删除了一些不可移植的CSS代码；

Answer 11

水平

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: #C3C3C3;
    border: 2px solid #eee;
}

滚动

，则更新的CSS修复不起作用（在Android Chrome和iOS Safari多个版本上测试），例如：

div

我找到了一个解决方案，并将其修改为CSS技巧之前的水平滚动。我已经在 Android Chrome 和 iOS Safari 上测试过它，监听器触摸事件已经存在很长时间了，所以它有很好的支持：

http://caniuse.com/#feat=touch

.

用途：

-webkit-overflow-scrolling: touch

功能：

touchHorizScroll('divIDtoScroll');

从垂直解决方案修改（CSS 之前的技巧）：

http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/