logo标签列表

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

cssipadios
84

在开发iPad网站时，我尝试使用CSS属性overflow: auto来获得在div中需要滚动条的效果，但是我的设备即使可以使用双指滚动，也无法显示它们。

我已经尝试了：

overflow: auto;

和

overflow: scroll;

结果仍然相同。

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

有什么想法吗？

1
我的问题在这里被很好地描述了：http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html - mat_jack1
11个回答
115

编辑 根据 kritzikratzi 亲切留言:

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

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

原始回答，留作纪念。

不幸的是，无论是 overflow：auto 还是 scroll 都无法在iOS设备上产生滚动条，显然是由于屏幕宽度占用了这些有用机制。

如您所发现的那样，用户需要执行双指滑动才能滚动 overflow 内容。自己找到的唯一参考资料，因为我无法找到手机本身的手册，只能在这里找到：tuaw.com: iPhone 101: Two-fingered scrolling。

我能想到的唯一解决方法是，如果您可能使用一些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"，但我认为有原因。

13
从iOS 5 beta版开始，可以添加一个新属性-webkit-overflow-scrolling:touch，这应该会产生预期的行为。 - kritzikratzi
@kritzikratzi：谢谢你的更新！我之前还没有听说过这件事，直到现在；这是一个有趣的发现 :) - David Thomas
我发现了http://filamentgroup.github.com/Overthrow/ Overthrow.js，它可以为不支持overflow:scroll的设备（如iOS4）提供polyfill。 - Galaxy
2
非常有趣的解决方案...不幸的是，使用这种方法滚动条只在滚动期间可见，而不总是可见... - Luca Detomi
是的，我正在寻找一种方法来最初展示它一秒钟（将其用于可滚动的“单击以打开菜单”中）。尝试触发scrollTop，但在iOS中不起作用。有什么想法吗？ - Björn
显示剩余2条评论
20

在你的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);
}
1
这在Chrome的IPAD模拟器上完美运行。我还没有在实际的IPAD上尝试过，但是抱着好心态，谢谢！ - user2808054
18

我进行了一些测试，发现使用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); 
}

唯一的缺陷是我还没有想出如何与i产品上的滚动条交互，但您可以通过与内容交互来滚动它。

此外，这个滚动条不会出现在内容的顶部，而是像Windows一样占据自己的空间（将内容向左推）。还有什么想法可以避免这种情况？ - Björn
记录一下，::-webkit-scrollbar 在 iPhone 4/iOS 7 上不起作用。 - lulalala
6

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

2
确保您的body和div中没有

标签。
  position:fixed

否则它将无法工作。
2
这段文本的意思是：“iScroll4 JavaScript库可以解决这个问题。它有一个hideScrollbar方法，您可以将其设置为false以防止滚动条消失。”
2

根据我的经验，你需要确保元素应用了display:block;才能使-webkit-overflow-scrolling:touch;起作用。

1
它对我不起作用。Chrome 显示 -webkit-overflow-scrolling:touch; 无效。 - Victor Hugo Arango A.
2
1
::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

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

使用此代码，它适用于iOS / Android APP WebView；它会删除一些不可移植的CSS代码。

1

对我来说运行良好，请尝试：

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接