CSS - Overflow Scroll - Always show vertical scroll bar

Question

So currently I have    div     position  relative    height  510px    overflow-y  scroll      However I don t believe that it will be obvious to some users that there is more content there  They could scroll down the page without knowing that my div actually contains a lot more content  I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content  but this doesn t work for all of them   I am using a Mac  and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll  Is there a way to always have it displaying

User · Accepted Answer

Just ran into this problem myself  OSx Lion hides scrollbars while not in use to make it seem more  slick   but at the same time the issue you addressed comes up  people sometimes cannot see whether a div has a scroll feature or not    The fix  In your css include -    -webkit-scrollbar     -webkit-appearance  none    width  7px       -webkit-scrollbar-thumb     border-radius  4px    background-color  rgba 0  0  0   5     box-shadow  0 0 1px rgba 255  255  255   5        x000D   x000D     always show scrollbars    x000D   x000D    -webkit-scrollbar   x000D    -webkit-appearance  none  x000D    width  7px  x000D    x000D   x000D    -webkit-scrollbar-thumb   x000D    border-radius  4px  x000D    background-color  rgba 0  0  0   5   x000D    box-shadow  0 0 1px rgba 255  255  255   5   x000D    x000D   x000D   x000D     css for demo    x000D   x000D   container   x000D    height  4em  x000D       shorter than the child    x000D    overflow-y  scroll  x000D       clip height to 4em and scroll to show the rest    x000D    x000D   x000D   child   x000D    height  12em  x000D       taller than the parent to force scrolling    x000D    x000D   x000D   x000D         ignore stuff below  it s just to help with the visual         x000D   x000D   container   x000D    background-color   ffc  x000D    x000D   x000D   child   x000D    margin  30px  x000D    background-color   eee  x000D    text-align  center  x000D    x000D   lt div id  container  gt  x000D     lt div id  child  gt Example lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    customize the apperance as needed  Source

User · Answer

Try the following code to display scroll bar always on your page    -webkit-scrollbar     -webkit-appearance  none    width  10px       -webkit-scrollbar-thumb     border-radius  5px    background-color  rgba 0 0 0  5     -webkit-box-shadow  0 0 1px rgba 255 255 255  5      this will always show the vertical and horizontal scroll bar on your page  If you need only a vertical scroll bar then put overflow-x  hidden

User · Answer

This will make the scroll bars always display when there is content within windows that must be scrolled to access  it applies to all windows and all apps on the Mac   Launch System Preferences from the   Apple menu Click on the    General    settings panel Look for    Show scroll bars    and select the radiobox next to    Always    Close out of System Preferences when finished

User · Answer

This will work with iPad on Safari on iOS 7 1 x from my testing  I m not sure about iOS 6 though  However  it will not work on Firefox  There is a jQuery plugin which aims to be cross browser compliant called jScrollPane   Also  there is a duplicate post here on Stack Overflow which has some other details

User · Answer

Please note on iPad Safari  NoviceCoding s solution won t work if you have -webkit-overflow-scrolling  touch  somewhere in your CSS  The solution is either removing all the occurrences of -webkit-overflow-scrolling  touch  or putting -webkit-overflow-scrolling  auto  with  NoviceCoding s solution

[css] CSS - Overflow: Scroll; - Always show vertical scroll bar?

Examples related to css

Examples related to macos

Examples related to scroll

Examples related to overflow