How to get the scroll bar with CSS overflow on iOS

Question

Developing an iPad website I tried to use the CSS property overflow  auto to get the scrollbars if needed in a div  but my device is refusing to show them even if the two fingers scroll is working   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     Any ideas

User · Answer

I have done some testing and using CSS3 to redefine the scrollbars works and you get to keep your Overflow:scroll; or 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

User · Answer

If you are trying to achieve horizontal div scrolling with touch on mobile  the updated CSS fix does not work  tested on Android Chrome and iOS Safari multiple versions   eg   -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   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    http   chris-barr com 2010 05 scrolling a overflowauto element on a touch screen device

User · Answer

make sure your body and divs have not a     position fixed   else it would not work

User · Answer

Edit following the comment left  kindly  by kritzikratzi       Starting  with ios 5beta a new property -webkit-overflow-scrolling  touch can be added which should result in the expected behaviour    Some  but very little  further reading    Native momentum scrolling in 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   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   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 overflow elements  Alternatively you could use  media queries to remove the overflow and show the content in full  as an iPhone user this gets my vote  if only for the sheer simplicity  For example    lt link rel  stylesheet  href  handheld css  media  only screen and  max-device width 480px     gt    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

User · Answer

Solution given by 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             Works fine for me  Remove event preventDefault if you need to use some clicks

User · Answer

Works fine for me  please try    scroll-container     max-height  250px    overflow  auto    -webkit-overflow-scrolling  touch

User · Answer

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

User · Answer

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

User · Answer

The iScroll4 javascript library will fix it right up  It has a hideScrollbar method that you can set to false to prevent the scrollbar from disappearing

User · Answer

-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

User · Answer

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

[css] How to get the scroll bar with CSS overflow on iOS

Examples related to css

Examples related to ipad

Examples related to ios