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

Question

开发一个iPad网站我试图使用CSS属性overflow: auto来获取滚动条,如果需要的话div,但我的设备即使双指滚动工作也拒绝显示它们.

我试过了

overflow: auto;

和

overflow: scroll;

结果是一样的.

我只是在iPad上测试(在桌面浏览器上工作得很好).

有任何想法吗？

Answer 1

亲切地,通过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",但我认为有理由.

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

解决方案由克里斯巴尔在这里给出

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