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

How to get the scroll bar with CSS overflow on iOS

提问by mat_Hyman1

Developing an iPad website I tried to use the CSS property overflow: autoto get the scrollbars if needed in a div, but my device is refusing to show them even if the two fingers scroll is working.

开发一个 iPad 网站我尝试使用 CSS 属性overflow: auto来获取滚动条（如果需要的话）div，但即使两个手指滚动正常，我的设备也拒绝显示它们。

I tried with

我试过

overflow: auto;

and

和

overflow: scroll;

and the result is the same.

结果是一样的。

I'm only testing on an iPad (on desktop browsers works perfectly).

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

Any ideas?

有任何想法吗？

回答by David says reinstate Monica

Editfollowing the comment left, kindly, by kritzikratzi:

请按照 kritzikratzi留下的评论进行编辑：

[Starting] with ios 5beta a new property -webkit-overflow-scrolling: touchcan be added which should result in the expected behaviour.

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

Some, but very little, further reading:

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

• Native momentum scrolling in iOS 5

• iOS 5 中的原生动量滚动

---

---

Original answer, left for posterity.

原始答案，留给后人。

Unfortunately neither overflow: auto, or scroll, produces scrollbars on the iOS devices, apparently due to the screen-width that would be taken up such useful mechanisms.

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

Instead, as you've found, users are required to perform the two-finger swipe in order to scroll the overflow-ed content. The only reference, since I'm unable to find the manual for the phone itself, I could find is here: tuaw.com: iPhone 101: Two-fingered scrolling.

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

The only work-around I can think of for this, is if you could possibly use some JavaScript, and maybe jQTouch, to create your own scroll-bars for overflowelements. Alternatively you could use @media queriesto remove the overflowand show the content in full, as an iPhone user this gets my vote, if only for the sheer simplicity. For example:

我能想到的唯一解决方法是，您是否可以使用一些 JavaScript，也许是 jQTouch，为overflow元素创建自己的滚动条。或者，您可以使用@media 查询删除overflow并完整显示内容，作为 iPhone 用户，这得到了我的投票，即使只是为了简单。例如：

<link rel="stylesheet" href="handheld.css" media="only screen and (max-device width:480px)" />

The preceding code comes from A List Apart, from the same article linked-to above (I'm not sure why they left of the type="text/css", but I assume there are reasons.

前面的代码来自A List Apart，来自与上面链接的同一篇文章（我不确定他们为什么离开了type="text/css"，但我认为有原因。

回答by Vex_man

I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll;or Overflow:auto

我已经做了一些测试并使用 CSS3 来重新定义滚动条的作品，你可以保持你的Overflow:scroll;或Overflow:auto

I ended up with something like this...

我最终得到了这样的东西......

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

The only down side which I have not yet been able to figure out is how to interact with the scrollbars on iProducts but you can interact with the content to scroll it

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

回答by Prafull

Apply this code in your 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);
}

回答by mikmikmik

Solution given by Chris Barr here

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

Works fine for me. Remove event.preventDefault if you need to use some clicks...

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

回答by Dan Gayle

The iScroll4javascript library will fix it right up. It has a hideScrollbarmethod that you can set to falseto prevent the scrollbar from disappearing.

该iScroll4JavaScript库将修复它的权利了。它有一个hideScrollbar方法，您可以设置false为防止滚动条消失。

回答by Matoeil

make sure your body and divs have not a

确保你的 body 和 divs 没有

  position:fixed

else it would not work

否则它不会工作

回答by Luca Detomi

Other 2 peoples on SO proposed possible CSS-only solution to the problem. David Thomas' solution is perfect but has the limit that scrollbar is visible only during scrolling.

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

In order to have scrollbars always visible, is possible to followin guidelines suggested on the following links:

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

• How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?
• CSS - Overflow: Scroll; - Always show vertical scroll bar?

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

回答by junfeng_feng

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

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

Use this code, it work in ios/android APP webview; It delete some not portable css code;

使用这段代码，它在ios/android APP webview中工作；它删除了一些不可移植的css代码；

回答by camslice

In my experience you need to make sure the element has display:block;applied for the -webkit-overflow-scrolling:touch;to work.

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

回答by Steve Seeger

If you are trying to achieve horizontal divscrollingwith touch on mobile, the updated CSS fix does not work (tested on Android Chrome and iOS Safari multiple versions), eg:

如果您尝试在移动设备上通过触摸实现水平div滚动，则更新的 CSS 修复不起作用（在 Android Chrome 和 iOS Safari 多个版本上测试），例如：

-webkit-overflow-scrolling: touch

I found a solution and modified it for horizontal scrolling from before the CSS trick. I've tested it on Android Chrome and iOS Safari and the listener touch events have been around a long time, so it has good support: http://caniuse.com/#feat=touch.

我找到了一个解决方案，并在使用 CSS 技巧之前将其修改为水平滚动。我已经在 Android Chrome 和 iOS Safari 上对其进行了测试，并且监听器触摸事件已经存在很长时间了，因此它有很好的支持：http: //caniuse.com/#feat=touch。

Usage:

用法：

touchHorizScroll('divIDtoScroll');

Functions:

职能：

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

Modified from vertical solution (pre CSS trick):

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

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

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