Hide scroll bar but while still being able to scroll

Question

I want to be able to scroll through the whole page  but without the scrollbar being shown   In Google Chrome it s     -webkit-scrollbar       display  none      But Mozilla Firefox and Internet Explorer don t seem to work like that   I also tried this in CSS   overflow  hidden    That does hide the scrollbar  but I can t scroll any more   Is there a way I can remove the scrollbar while still being able to scroll the whole page   With just CSS or HTML  please

User · Answer

The following was working for me on Microsoft  Chrome and Mozilla for a specific div element   div rightsidebar       overflow-y  auto      scrollbar-width  none      -ms-overflow-style  none    div rightsidebar  -webkit-scrollbar        width  0  important

User · Answer

Use this to hide the scrollbar but keep functionality   example  -webkit-scrollbar     display  none     Hide scrollbar for IE  Edge and Firefox  example     -ms-overflow-style  none      IE and Edge      scrollbar-width  none      Firefox

User · Answer

Just set the width of the child s width to 100   padding to 15 pixels  overflow-x to scroll and overflow hidden for the parent and whatever width you want   It works perfectly on all major browsers  including Internet nbsp Explorer and Edge with the exception of Internet nbsp Explorer nbsp 8 and lower

User · Answer

Adding padding to an inner div  as in the currently accepted answer  won t work if for some reason you want to use box-model  border-box   What does work in both cases is increasing the width of the inner div to 100  plus the scrollbar s width  assuming overflow  hidden on the outer div    For example  in CSS    container2       width  calc 100    19px       In JavaScript  cross-browser   var child   document getElementById  container2    var addWidth   child offsetWidth - child clientWidth    px   child style width    calc 100        addWidth

User · Answer

Another sort of hacky approach is to do overflow-y  hidden and then manually scroll the element with something like this   function detectMouseWheelDirection e      var delta   null  direction   false    if   e       If the event is not provided  we get it from the window object     e   window event        if  e wheelDelta       Will work in most cases     delta   e wheelDelta   60      else if  e detail       Fallback for Firefox     delta   -e detail   2        if  delta     null        direction   delta  gt  0   -200   200        return direction     if  element addEventListener      element addEventListener  DOMMouseScroll   function e        element scrollBy         top  detectMouseWheelDirection e         left  0        behavior   smooth                    There s a great article about how to detect and deal with onmousewheel events in deepmikoto s blog  This might work for you  but it is definitively not an elegant solution

User · Answer

This is how I do it for horizontal scroll  only CSS and works well with frameworks like Bootstrap   col-   It only needs two extra divs and the parent with a width or max-width set   You can select the text to make it scroll or scroll it with fingers if you have a touchscreen    x000D   x000D   overflow-x-scroll-no-scrollbar   x000D      overflow  hidden  x000D    x000D   overflow-x-scroll-no-scrollbar div   x000D      overflow-x  hidden  x000D      margin-bottom  -17px  x000D      overflow-y  hidden  x000D      width  100   x000D    x000D   overflow-x-scroll-no-scrollbar div     x000D      overflow-x  auto  x000D      width  100   x000D      padding-bottom  17px  x000D      white-space  nowrap  x000D      cursor  pointer x000D    x000D   x000D     The following classes are only here to make the example looks nicer    x000D   row   x000D      width  100  x000D    x000D   col-xs-4   x000D      width  33   x000D      float  left x000D    x000D   col-xs-3   x000D      width 25   x000D      float left x000D    x000D   bg-gray   x000D      background-color   DDDDDD x000D    x000D   bg-orange   x000D      background-color  FF9966 x000D    x000D   bg-blue   x000D      background-color   6699FF x000D    x000D   bg-orange-light  x000D      background-color   FFAA88 x000D    x000D   bg-blue-light  x000D      background-color   88AAFF x000D    x000D   lt html gt  lt body gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4 bg-orange  gt Column 1 lt  div gt  x000D       lt div class  col-xs-3 bg-gray  gt Column 2 lt  div gt  x000D       lt div class  col-xs-4 bg-blue  gt Column 3 lt  div gt  x000D     lt  div gt  x000D     lt div class  row  gt  x000D       lt div class  col-xs-4 bg-orange-light  gt Content 1 lt  div gt  x000D       lt div class  col-xs-3 overflow-x-scroll-no-scrollbar  gt  x000D         lt div gt  x000D           lt div gt This content too long for the container  so it needs to be hidden but scrollable without scrollbars lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-xs-4 bg-blue-light  gt Content 3 lt  div gt  x000D     lt  div gt  x000D   lt  body gt  lt  html gt  x000D   x000D   x000D    Short version for lazy people    x000D   x000D   overflow-x-scroll-no-scrollbar   x000D      overflow  hidden  x000D    x000D   overflow-x-scroll-no-scrollbar div   x000D    overflow-x  hidden  x000D    margin-bottom  -17px  x000D    overflow-y  hidden  x000D    width  100   x000D    x000D   overflow-x-scroll-no-scrollbar div     x000D    overflow-x  auto  x000D    width  100   x000D    padding-bottom  17px  x000D    white-space  nowrap  x000D    cursor pointer x000D    x000D   x000D     The following classes are only here to make the example looks nicer    x000D   parent-style   x000D      width  100px  x000D      background-color   FF9966 x000D    x000D   lt div class  parent-style overflow-x-scroll-no-scrollbar  gt  x000D     lt div gt  x000D       lt div gt This content too long for the container  so it needs to be hidden but scrollable without scrollbars lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

In addition  Scrolling without scroll bar for all browsers   CSS   keep-scrolling     background-color   eee    width  200px    height  100px    border  1px dotted black    overflow-y  scroll     Add the ability to scroll y axis         Hide scrollbar for Chrome  Safari and Opera     keep-scrolling  -webkit-scrollbar       display  none        Hide scrollbar for IE  Edge and Firefox     keep-scrolling     -ms-overflow-style  none      IE and Edge      scrollbar-width  none      Firefox       SCSS  keep-scrolling         background-color   eee        width  200px        height  100px        border  1px dotted black        overflow-y  scroll     Add the ability to scroll y axis            Hide scrollbar for IE  Edge and Firefox          -ms-overflow-style  none      IE and Edge          scrollbar-width  none      Firefox              Hide scrollbar for Chrome  Safari and Opera            -webkit-scrollbar           display  none                        HTML   lt div class  quot keep-scrolling quot  gt   lt  div gt

User · Answer

On modern browsers you can use wheel event      Content is the element you want to apply the wheel scroll effect to content addEventListener  wheel   function e        const step   100     How many pixels to scroll      if  e deltaY  gt  0     Scroll down         content scrollTop    step      else    Scroll up         content scrollTop -  step

User · Answer

I just wanted to share a combined snippet for hiding the scrollbar that I use when developing  It is a collection of several snippets found on the Internet that works for me    container       overflow-x  scroll     For horiz  scroll  otherwise overflow-y  scroll          -ms-overflow-style  none      overflow  -moz-scrollbars-none      scrollbar-width  none       container  -webkit-scrollbar       display  none      Safari and Chrome

User · Answer

This will be at the body    lt div id  maincontainer   gt   lt div id  child  gt this is the 1st step lt  div gt   lt div id  child  gt this is the 2nd step lt  div gt   lt div id  child  gt this is the 3rd step lt  div gt      And this is the CSS    maincontainer       background  grey      width  101       height  101       overflow  auto      position  fixed      child       background  white      height 500px

User · Answer

Just use following three lines and your problem will be solved    liaddshapes  -webkit-scrollbar       width  0  important      Where liaddshapes is the name of the div where scroll is coming

User · Answer

This is a divitis-esque solution which nontheless should work for all browsers     The markup is as follows and needs to be inside something with relative positioning  and its width should be set  for example 400 pixels     lt div class  hide-scrollbar  gt       lt div class  scrollbar  gt           lt div class  scrollbar-inner  gt            lt  div gt       lt  div gt   lt  div gt    The CSS    hide-scrollbar       overflow  hidden      position  absolute      top  0      left  0      right  0      bottom  0      scrollbar       overflow-y  scroll      position  absolute      top  0      left  0      right  -50px      bottom  0      scrollbar-inner       width  400px

User · Answer

className  -webkit-scrollbar      display  none      Everything you ve written is correct except  quot overflow quot   webkit for Chrome and other browsers  overflow-y  scroll    or  overflow-y  auto    For Firefox and Edge  scrollbar-width  none    or  scrollbar-width  thin

User · Answer

This works for me with simple CSS properties    container       -ms-overflow-style  none      Internet Explorer 10         scrollbar-width  none      Firefox       container  -webkit-scrollbar        display  none      Safari and Chrome        For older versions of Firefox  use  overflow  -moz-scrollbars-none

User · Answer

Another simple working fiddle    maincontainer       background  orange      width  200px      height  200px      overflow  hidden      childcontainer       background  yellow      position  relative      width  200px      height  200px      top  20px      left  20px      overflow  auto      Overflow hidden on the parent container  and overflow auto on the child container  Simple

User · Answer

This works for me cross-browser  However  this doesn t hide native scrollbars on mobile browsers   In SCSS   hide-native-scrollbar     scrollbar-width  none     Firefox 64      -ms-overflow-style  none     Internet Explorer 11       amp   -webkit-scrollbar       WebKit        display  none          In CSS   hide-native-scrollbar     scrollbar-width  none     Firefox 64      -ms-overflow-style  none     Internet Explorer 11       hide-native-scrollbar  -webkit-scrollbar       WebKit      display  none

User · Answer

Just a test which is working fine   parent      width  100       height  100       overflow  hidden      child      width  100       height  100       overflow-y  scroll      padding-right  17px     Increase decrease this value for cross-browser compatibility        box-sizing  content-box     So the width will be 100    17px       Working Fiddle JavaScript  Since the scrollbar width differs in different browsers  it is better to handle it with JavaScript  If you do Element offsetWidth - Element clientWidth  the exact scrollbar width will show up  JavaScript Working Fiddle Or Using Position  absolute   parent      width  100       height  100       overflow  hidden      position  relative      child      position  absolute      top  0      bottom  0      left  0      right  -17px     Increase Decrease this value for cross-browser compatibility        overflow-y  scroll     Working Fiddle JavaScript Working Fiddle Information  Based on this answer  I created a simple scroll plugin

User · Answer

I had this problem  and it is super simple to fix   Get two containers  The inner will be your scrollable container and the outer will obviously house the inner    inner container   width  102   overflow  auto     outer container   overflow  hidden     It is super simple and should work with any browser

User · Answer

UPDATE   Firefox now supports hiding scrollbars with CSS  so all major browsers are now covered  Chrome  Firefox  Internet nbsp Explorer  Safari  etc     Simply apply the following CSS to the element you want to remove scrollbars from    container       overflow-y  scroll      scrollbar-width  none     Firefox        -ms-overflow-style  none      Internet Explorer 10        container  -webkit-scrollbar      WebKit        width  0      height  0      This is the least hacky cross browser solution that I m currently aware of  Check out the demo     ORIGINAL ANSWER   Here s another way that hasn t been mentioned yet  It s really simple and only involves two divs and CSS  No JavaScript or proprietary CSS is needed  and it works in all browsers  It doesn t require explicitly setting the width of the container either  thus making it fluid   This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position  The technique works for vertical  horizontal and two way scrolling   Demos    Vertical Horizontal Both directions   Example code for the vertical version   HTML    lt div class  parent  gt     lt div class  child  gt      Your content     lt  div gt   lt  div gt    CSS    parent     width  400px    height  200px    border  1px solid  AAA    overflow  hidden      child     height  100     margin-right  -50px     Maximum width of scrollbar      padding-right  50px     Maximum width of scrollbar      overflow-y  scroll

User · Answer

It is easy in WebKit  with optional styling  html       overflow  scroll      overflow-x  hidden      -webkit-scrollbar       width  0      Remove scrollbar space        background  transparent      Optional  just make scrollbar invisible         Optional  show position indicator in red      -webkit-scrollbar-thumb       background   FF0000

User · Answer

This answer doesn t include the code  so here is the solution from page   According to the page this approach doesn t need to know the width of the scrollbar ahead of time in order to work and the solution works for all browsers too  and can be seen here   The good thing is that you are not forced to use padding or width differences to hide the scrollbar   This is also zoom safe  Padding width solutions show the scrollbar when zoomed to minimum   Firefox fix  http   jsbin com mugiqoveko 1 edit output   x000D   x000D   element  x000D   outer-container   x000D    width  200px  x000D    height  200px  x000D    x000D   outer-container   x000D    border  5px solid purple  x000D    position  relative  x000D    overflow  hidden  x000D    x000D   inner-container   x000D    position  absolute  x000D    left  0  x000D    overflow-x  hidden  x000D    overflow-y  scroll  x000D    padding-right  150px  x000D    x000D   inner-container  -webkit-scrollbar   x000D    display  none  x000D    x000D   lt div class  outer-container  gt  x000D     lt div class  inner-container  gt  x000D       lt div class  element  gt  x000D        Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer vehicula quam nibh  eu tristique tellus dignissim quis  Integer condimentum ultrices elit ut mattis  Praesent rhoncus tortor metus  nec pellentesque enim mattis nec  Nulla vitae turpis ut x000D        dui consectetur pellentesque quis vel est  Curabitur rutrum  mauris ut mollis lobortis  sem est congue lectus  ut sodales nunc leo a libero  Cras quis sapien in mi fringilla tempus condimentum quis velit  Aliquam id aliquam arcu  Morbi tristique x000D        aliquam rutrum  Duis tincidunt  orci suscipit cursus molestie  purus nisi pharetra dui  tempor dignissim felis turpis in mi  Vivamus ullamcorper arcu sit amet mauris egestas egestas  Vestibulum turpis neque  condimentum a tincidunt quis  molestie x000D        vel justo  Sed molestie nunc dapibus arcu feugiat  ut sollicitudin metus sagittis  Aliquam a volutpat sem  Quisque id magna ultrices  lobortis dui eget  pretium libero  Curabitur aliquam in ante eu ultricies  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To hide scroll bars for elements with overflowing content use    div     scrollbar-width  none     The most elegant way for Firefox

User · Answer

I happen to try the above solutions in my project and for some reason I was not able to hide the scroll bar due to div positioning   Hence  I decided to hide the scroll bar by introducing a div that covers it superficially   Example below is for a horizontal scroll bar    lt div id  container  gt     lt div id  content  gt       My content that could overflow horizontally    lt  div gt     lt div id  scroll-cover  gt        amp nbsp      lt  div gt   lt  div gt    Corresponding CSS is as follows    container     width  100      height  100      overflow  hidden     position  relative      content    width  100     height  100     overflow-x  scroll     scroll-cover    width  100     height  20px    position  absolute    bottom  0    background-color   fff    change this to match color of page

User · Answer

This works for me    scroll-content       overflow-x  hidden      overflow-y  scroll     scroll-content  -webkit-scrollbar       width  0

User · Answer

My problem  I don t want any style in my HTML content  I want my body directly scrollable without any scrollbar  and only a vertical scroll  working with CSS grids for any screen size   The box-sizing value impact padding or margin solutions  they works with box-sizing content-box   I still need the  -moz-scrollbars-none  directive  and like gdoron and Mr Green  I had to hide the scrollbar  I tried -moz-transform and -moz-padding-start  to impact only Firefox  but there was responsive side effects that needed too much work   This solution works for HTML body content with  display  grid  style  and it is responsive      Hide HTML and body scroll bar in CSS grid context    html  body     position  static     Or relative or fixed          box-sizing  content-box     Important for hidding scrollbar      display  grid     For CSS grid          Full screen      width  100vw    min-width  100vw    max-width  100vw    height  100vh    min-height  100vh    max-height  100vh    margin  0    padding  0     html     -ms-overflow-style  none      Internet Explorer 10       overflow  -moz-scrollbars-none     Should hide the scroll bar          No scroll bar for Safari and Chrome    html  -webkit-scrollbar  body  -webkit-scrollbar     display  none     Might be enough      background  transparent    visibility  hidden    width  0px        Firefox only workaround     -moz-document url-prefix          Make HTML with overflow hidden      html       overflow  hidden            Make body max height auto         Set right scroll bar out the screen       body          Enable scrolling content        max-height  auto          100vw  15px  trick to set the scroll bar out the screen        width  calc 100vw   15px       min-width  calc 100vw   15px       max-width  calc 100vw   15px           Set back the content inside the screen        padding-right  15px         body        Allow vertical scroll      overflow-y  scroll

User · Answer

Use  CSS  subparent       overflow  hidden      width  500px      border  1px rgba 0  0  0  1 00  solid      parent       width  515px      height  300px      overflow-y  auto      overflow-x  hidden      opacity  10       child       width  511px      background-color  rgba 123  8  10  0 42      HTML  lt body gt       lt div id  quot subparent quot  gt           lt div id  quot parent quot  gt               lt div id  quot child quot  gt                   lt  - Code here for scroll - gt               lt  div gt           lt  div gt        lt  div gt   lt  body gt

User · Answer

Use  function reloadScrollBars         document documentElement style overflow    auto       Firefox  Chrome     document body scroll    yes      Internet Explorer only    function unloadScrollBars         document documentElement style overflow    hidden       firefox  chrome     document body scroll    no      Internet Explorer only     Call these functions for any point you want to load or unload or reload the scrollbars  It is still scrollable in Chrome as I tested it in Chrome  but I am not sure of the other browsers

User · Answer

Hide both horizontal and vertical scroll bars   See Fiddle here  HTML    lt div id  container1  gt       lt div id  container2  gt       lt pre gt   Select from left and drag to right to scroll this very long sentence  This should not show scroll bar at bottom or on the side  Keep scrolling                                                This Fiddle demonstrates that scrollbar can be hidden                               lt  pre gt        lt  div gt       lt div gt    CSS          margin  0     container1       height  50px      width  100       overflow  hidden      position  relative     container2       position  absolute      top  0px      bottom  -15px      left  0px      right  -15px      overflow  auto

User · Answer

You can use the code below to hide the scroll bar  but while still being able to scroll    element  -webkit-scrollbar        width  0  important

User · Answer

The following SASS styling should make your scrollbar transparent on most browsers  Firefox is not supported     hide-scrollbar     scrollbar-width  thin    scrollbar-color  transparent transparent      amp   -webkit-scrollbar       width  1px          amp   -webkit-scrollbar-track       background  transparent          amp   -webkit-scrollbar-thumb       background-color  transparent

User · Answer

As of December 11th 2018  Firefox 64 and above   the answer to this question is very simple indeed as Firefox 64  now implements the CSS Scrollbar Styling spec   Just use the following CSS   scrollbar-width  none    Firefox 64 release note link here

User · Answer

This tricky solution works even on old IE web browser It s a workaround to the   vertical scrollbar    lt html gt    lt head gt     lt style gt      html      body         overflow  -moz-scrollbars-vertical        overflow-x  hidden        overflow-y  hidden        height  100         margin  0           lt  style gt   lt  head gt    lt body id  quot body quot  style  quot overflow auto height 100  quot  onload  quot document getElementById  body   style width document body offsetWidth 20  px  quot  gt     lt  --your stuff here-- gt   lt  body gt    lt  html gt   Just try it  jsfiddle

User · Answer

HTML    lt div class  parent  gt       lt div class  child  gt       lt  div gt   lt  div gt    CSS    parent      position  relative      width  300px      height  150px      border  1px solid black      overflow  hidden      child       height  150px         width  318px      overflow-y  scroll      Apply CSS accordingly   Check it here  tested in Internet nbsp Explorer and Firefox

User · Answer

Use    lt div style  overflow hidden  width 500px   gt      lt div style  overflow scroll  width 508px  gt        My scroll-able area     lt  div gt   lt  div gt    This is a trick to somewhat overlap the scrollbar with an overlapping div which doesn t have any scroll bars     -webkit-scrollbar       display  none      This is only for WebKit browsers    Or you could use browser-specific CSS content  if there is any in future   Every browser could have a different and specific property for their respective bars   For Microsoft Edge use  -ms-overflow-style  -ms-autohiding-scrollbar  or -ms-overflow-style  none  as per MSDN   There is no equivalent for Firefox  Although there is a jQuery plugin to achieve this  http   manos malihu gr tuts jquery custom scrollbar html

User · Answer

scrollbar-width  none      works for me

[html] Hide scroll bar, but while still being able to scroll

Examples related to html

Examples related to css

Examples related to google-chrome

Examples related to internet-explorer

Examples related to firefox