Question

开发一个iPad网站我尝试使用CSS属性overflow: auto来获取div中的滚动条，但是即使两个手指滚动工作，我的设备也拒绝显示它们。

我试过

overflow: auto;

和

overflow: scroll;

，结果是一样的。

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

有什么想法吗？

Answer 1

在kritzikratzi之后留下评论，

修改：

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

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

Native momentum scrolling in iOS 5

原始回答，留给子孙后代。

很遗憾，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"，但我认为有原因。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

iScroll4 javascript库会立即修复它。它有hideScrollbar方法，您可以设置为false以防止滚动条消失。

Answer 6

SO上的其他2个人提出了可能的CSS解决方案。大卫托马斯的解决方案是完美的，但有滚动条仅在滚动时可见的限制。

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

Answer 7

确保你的身体和div没有

  position:fixed

否则它不起作用

Answer 8

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

Answer 9

如果您尝试通过手机触摸实现水平div滚动，则更新后的CSS修复无效（在Android Chrome和iOS Safari多个版本上测试），例如：< / p>

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

Answer 10

对我来说很好，请尝试：

.scroll-container {
  max-height: 250px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Answer 11

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

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

使用此代码，它适用于ios / android APP webview;它删除了一些不可移植的css代码;

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

11 个答案: