CSS hide scroll bar but have element scrollable

Question

I have this element called items and the content inside the element is longer than the element height  I want to make it scrollable but hide the scroll bar  how would I do that    lt div class  left-side  gt       lt div class  items  style  display block width  94  margin  0 auto overflow  hidden   gt       lt  div gt   lt  div gt    left-side       width  1470px      padding-top  20px      height  878px      I tried setting the left-side class overflow to auto  but that didn t do anything

User · Answer

work on all major browsers  html       overflow  scroll      overflow-x  hidden      -webkit-scrollbar       width  0px      Remove scrollbar space        background  transparent      Optional  just make scrollbar invisible

User · Answer

I combined a couple of different answers in SO into the following snippet  which should work on all  if not most  modern browsers I believe   All you have to do is add the CSS class  disable-scrollbars onto the element you wish to apply this to    disable-scrollbars  -webkit-scrollbar       width  0px      background  transparent     Chrome Safari Webkit        disable-scrollbars     scrollbar-width  none     Firefox      -ms-overflow-style  none      IE 10         And if you want to use SCSS SASS    disable-scrollbars     scrollbar-width  none     Firefox      -ms-overflow-style  none      IE 10        amp   -webkit-scrollbar       width  0px      background  transparent     Chrome Safari Webkit

User · Answer

You can make use of the SlimScroll plugin to make a div scrollable even if it is set to overflow  hidden  i e  scrollbar hidden    You can also control touch scroll as well as the scroll speed using this plugin   Hope this helps

User · Answer

if you use sass  you can try this    amp   -webkit-scrollbar

User · Answer

if you really want to get rid of the scrollbar  split the information up into two separate pages   Usability guidelines on scrollbars by Jakob Nielsen      There are five essential usability guidelines for scrolling and scrollbars          Offer a scrollbar if an area has scrolling content  Don t rely on   auto-scrolling or on dragging  which people might not notice     Hide   scrollbars if all content is visible  If people see a scrollbar  they   assume there s additional content and will be frustrated if they can t   scroll    Comply with GUI standards and use scrollbars that look like   scrollbars     Avoid horizontal scrolling on Web pages and minimize it   elsewhere     Display all important information above the fold  Users   often decide whether to stay or leave based on what they can see   without scrolling  Plus they only allocate 20  of their attention   below the fold       To make your scrollbar only visible when it is needed  i e  when there is content to scroll down to   use overflow  auto

User · Answer

You can hide it     html     overflow    scroll      -webkit-scrollbar       width  0px      background  transparent     make scrollbar transparent        For further information  see   Hide scroll bar  but while still being able to scroll

User · Answer

Similar to Kiloumap L art  lon s answer     -webkit-scrollbar       display none      works too

User · Answer

Hope this helps    Hide scrollbar for Chrome  Safari and Opera      -webkit-scrollbar     display  none        Hide scrollbar for IE  Edge and Firefox    html     -ms-overflow-style  none      IE and Edge      scrollbar-width  none      Firefox

[html] CSS hide scroll bar, but have element scrollable

Examples related to html

Examples related to css