CSS – Overflow: Scroll; – Always show vertical scroll bar?

by

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


/* always show scrollbars */

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


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}
<div id="container">
  <div id="child">Example</div>
</div>

customize the apperance as needed. Source

More Related Contents:

  1. Have a fixed position div that needs to scroll if content overflows
  2. Limit text length to n lines using CSS
  3. CSS text-overflow in a table cell?
  4. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  5. How to display scroll bar onto a html table
  6. Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
  7. parent & child with position fixed, parent overflow:hidden bug
  8. Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?
  9. Why does ‘overflow: auto’ clear floats? And why are clear floats needed?
  10. Pure CSS scroll animation
  11. firefox overflow-y not working with nested flexbox
  12. Make child visible outside an overflow:hidden parent
  13. Div height 100% and expands to fit content [duplicate]
  14. How can I remove the gloss on a select element in Safari on Mac?
  15. How to make the overflow CSS property work with hidden as value
  16. Scrollbar color change in Firefox
  17. How to detect if the OS is in dark mode in browsers?
  18. Overflow to left instead of right
  19. Make floating child visible outside an overflow:hidden parent
  20. CSS3 property webkit-overflow-scrolling:touch ERROR
  21. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  22. How to ignore parent element’s overflow:hidden in css
  23. Check scrolling with CSS
  24. Issue when centering vertically with flexbox when heights are unknown
  25. CSS: background image does not fill when scrolling
  26. Horizontal scroll in DIV with many small DIV’s inside (no text)
  27. overflow: hidden on div and body, different behavior
  28. 100% DIV width is not really 100%
  29. Swap DIV position with CSS only
  30. Webkit CSS to control the box around the color in an input[type=color]?

Leave a Comment