Hiding the scroll bar on an HTML page

Question

Can CSS be used to hide the scroll bar  How would you do this

User · Answer

To disable the vertical scroll bar  just add overflow-y hidden    Find more about it  overflow

User · Answer

If you want scrolling to work  before hiding scrollbars  consider styling them  Modern versions of OS X and mobile OS s have scrollbars that  while impractical for grabbing with a mouse  are quite beautiful and neutral   To hide scrollbars  a technique by John Kurlak works well except for leaving Firefox users who don t have touchpads with no way to scroll unless they have a mouse with a wheel  which they probably do  but even then they can usually only scroll vertically   John s technique uses three elements    An outer element to mask the scrollbars  A middle element to have the scrollbars  And a content element to both set the size of the middle element and make it have scrollbars    It must be possible to set the size of the outer and content elements the same which eliminates using percentages  but I can t think of anything else that won t work with the right tweaking   My biggest concern is whether all versions of browsers set scrollbars to make visible overflowed content visible  I have tested in current browsers  but not older ones   Pardon my SASS  P   size          set width and height     outer          mask scrollbars of child     overflow  hidden         set mask size      extend  size         has absolutely positioned child     position  relative      middle          always have scrollbars         don t use auto  it leaves vertical scrollbar showing     overflow  scroll         without absolute  the vertical scrollbar shows     position  absolute       prevent text selection from revealing scrollbar  which it only does on    some webkit based browsers   middle  -webkit-scrollbar       display  none      content          push scrollbars behind mask      extend  size      Testing  OS X is 10 6 8  Windows is Windows 7     Firefox 32 0 Scrollbars hidden  Arrow keys don t scroll  even after clicking to focus  but mouse wheel and two fingers on trackpad do  OS X and Windows  Chrome 37 0 Scrollbars hidden  Arrow keys work after clicking to focus  Mouse wheel and trackpad work  OS X and Windows  Internet Explorer 11 Scrollbars hidden  Arrow keys work after clicking to focus  Mouse wheel works  Windows  Safari 5 1 10 Scrollbars hidden  Arrow keys work after clicking to focus  Mouse wheel and trackpad work  OS X  Android 4 4 4 and 4 1 2  Scrollbars hidden  Touch scrolling works  Tried in Chrome 37 0  Firefox  32 0  and HTMLViewer on 4 4 4  whatever that is   In HTMLViewer  the page  is the size of the masked content and can be scrolled too  Scrolling  interacts acceptably with page zooming

User · Answer

You can accomplish this with a wrapper div that has its overflow hidden  and the inner div set to auto  To remove the inner div s scroll bar  you can pull it out of the outer div s viewport by applying a negative margin to the inner div  Then apply equal padding to the inner div so that the content stays in view  JSFiddle    HTML  lt div class  quot hide-scroll quot  gt       lt div class  quot viewport quot  gt                   lt  div gt   lt  div gt      CSS  hide-scroll       overflow  hidden      viewport       overflow  auto          Make sure the inner div is not larger than the container        so that we have room to scroll              max-height  100           Pick an arbitrary margin padding that should be bigger        than the max scrollbar width across the devices that         you are supporting         padding   -margin             margin-right  -100px      padding-right  100px

User · Answer

Yes  sort of    When you ask the question   Can the scroll-bars of a browser be removed in some way  rather than simply hidden or camouflaged   everyone will say  Not possible  because it is not possible to remove the scrollbars from all browsers in a compliant and cross-compatible way  and then there s the whole argument of usability   However  it is possible to prevent the browser from ever having the need to generate and display scrollbars if you do not allow your webpage to overflow   This just means that we have to proactively substitute the same behavior that the browser would typically do for us and tell the browser thanks but no thanks buddy   Rather than try to remove scrollbars  which we all know is not possible  we can avoid scrolling  perfectly feasible  and scroll within the elements that we make and have more control over   Create a div with overflow hidden  Detect when the user attempts to scroll  but is unable to because we ve disabled the browsers ability to scroll with overflow  hidden   and instead move the content up using JavaScript when this occurs  Thereby creating our own scrolling without the browsers default scrolling or use a plugin like iScroll   ---  For the sake of being thorough  all the vendor specific ways of manipulating scroll-bars   Internet Explorer 5 5    These properties were never part of the CSS specification  nor were they ever approved or vendor prefixed  but they work in Internet Explorer and Konqueror  These can also be set locally in the user style sheet for each application  In Internet nbsp Explorer you find it under the  Accessibility  tab  in Konqueror under the  Stylesheets  tab   body  html      These are defaults and can be replaced by hexadecimal color values        scrollbar-base-color  aqua      scrollbar-face-color  ThreeDFace      scrollbar-highlight-color  ThreeDHighlight      scrollbar-3dlight-color  ThreeDLightShadow      scrollbar-shadow-color  ThreeDDarkShadow      scrollbar-darkshadow-color  ThreeDDarkShadow      scrollbar-track-color  Scrollbar      scrollbar-arrow-color  ButtonText      As of Internet nbsp Explorer nbsp 8 these properties were vendor prefixed by Microsoft  but they were still never approved by W3C   -ms-scrollbar-base-color -ms-scrollbar-face-color -ms-scrollbar-highlight-color -ms-scrollbar-3dlight-color -ms-scrollbar-shadow-color -ms-scrollbar-darkshadow-color -ms-scrollbar-base-color -ms-scrollbar-track-color   Further details about Internet Explorer  Internet Explorer makes scroll available which sets whether or not to disable or enable scroll bars  it can also be used to get the value of the position of the scroll bars   With Microsoft Internet Explorer 6 and later  when you use the  DOCTYPE declaration to specify standards-compliant mode  this attribute applies to the HTML element  When standards-compliant mode is not specified  as with earlier versions of Internet nbsp Explorer  this attribute applies to the BODY element  NOT the HTML element   It s also worth noting that when working with  NET the ScrollBar class in System Windows Controls Primitives in the Presentation framework is responsible for rendering the scrollbars   http   msdn microsoft com en-us library ie ms534393 v vs 85  aspx   MSDN  Basic UI properties W3C  About non-standard scrollbar properties MSDN   NET ScrollBar Class     WebKit  WebKit extensions related to scroll-bar customization are     -webkit-scrollbar                   1      -webkit-scrollbar-button            2      -webkit-scrollbar-track             3      -webkit-scrollbar-track-piece       4      -webkit-scrollbar-thumb             5      -webkit-scrollbar-corner            6      -webkit-resizer                     7        These can each be combined with additional pseudo-selectors     horizontal     The horizontal pseudo-class applies to any scrollbar pieces that have a horizontal orientation   vertical     The vertical pseudo-class applies to any scrollbar pieces that have a vertical orientation   decrement     The decrement pseudo-class applies to buttons and track pieces  It indicates whether or not the button or track piece will decrement the view   s position when used  e g   up on a vertical scrollbar  left on a horizontal scrollbar    increment     The increment pseudo-class applies to buttons and track pieces  It indicates whether or not a button or track piece will increment the view   s position when used  e g   down on a vertical scrollbar  right on a horizontal scrollbar    start     The start pseudo-class applies to buttons and track pieces  It indicates whether the object is placed before the thumb   end     The end pseudo-class applies to buttons and track pieces  It indicates whether the object is placed after the thumb   double-button     The double-button pseudo-class applies to buttons and track pieces  It is used to detect whether a button is part of a pair of buttons that are together at the same end of a scrollbar  For track pieces it indicates whether the track piece abuts a pair of buttons   single-button     The single-button pseudo-class applies to buttons and track pieces  It is used to detect whether a button is by itself at the end of a scrollbar  For track pieces it indicates whether the track piece abuts a singleton button   no-button     Applies to track pieces and indicates whether or not the track piece runs to the edge of the scrollbar  i e   there is no button at that end of the track   corner-present     Applies to all scrollbar pieces and indicates whether or not a scrollbar corner is present   window-inactive     Applies to all scrollbar pieces and indicates whether or not the window containing the scrollbar is currently active   In recent nightlies  this pseudo-class now applies to   selection as well  We plan to extend it to work with any content and to propose it as a new standard pseudo-class     Examples of these combinations    -webkit-scrollbar-track-piece start      Select the top half  or left half  or scrollbar track individually        -webkit-scrollbar-thumb window-inactive      Select the thumb when the browser window isn t in focus        -webkit-scrollbar-button horizontal decrement hover      Select the down or left scroll button when it s being hovered by the mouse         Styling Scrollbars - Webkit org   Further details about Chrome     addWindowScrollHandler   public static HandlerRegistration addWindowScrollHandler Window ScrollHandler handler        nbsp  nbsp Adds a Window ScrollEvent handler   Parameters     nbsp  nbsp handler - the handler   Returns     nbsp  nbsp returns the handler registration    source  http   www gwtproject org javadoc latest com google gwt user client Window html addWindowScrollHandler com google gwt user client Window ScrollHandler          Mozilla  Mozilla does have some extensions for manipulating the scroll-bars  but they are all recommended not to be used    -moz-scrollbars-none They recommend using overflow hidden in place of this  -moz-scrollbars-horizontal Similar to overflow-x -moz-scrollbars-vertical Similar to overflow-y -moz-hidden-unscrollable Only works internally within a users profile settings  Disables scrolling XML root elements and disables using arrow keys and mouse wheel to scroll web pages  Mozilla Developer Docs on  Overflow    Further details about Mozilla  This is not really useful as far as I know  but it s worth noting that the attribute which controls whether or not scrollbars are displayed in Firefox is  reference link     Attribute  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp scrollbars Type  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp  nbsp nsIDOMBarProp Description  nbsp  nbsp The object that controls whether or not scrollbars are shown in the window  This attribute is  replaceable  in JavaScript  Read only   Last but not least  padding is like magic   As has been previously mentioned in some other answers  here is an illustration which is sufficiently self-explanatory       History lesson    Just because I m curious  I wanted to learn about the origin of scrollbars  and these are the best references I found    10 Inventions on Scrolling and Scrollbars https   tools ietf org id draft-hellstrom-textpreview-02 txt https   tools ietf org id draft-mrose-blocks-service-01 txt   Miscellaneous  In an HTML5 specification draft  the seamless attribute was defined to prevent scroll-bars from appearing in iFrames so that they could be blended with surrounding content on a page  Though this element does not appear in the latest revision   The scrollbar BarProp object is a child of the window object and represents the user interface element that contains a scrolling mechanism  or some similar interface concept  window scrollbars visible will return true if the scroll bars are visible   interface Window        The current browsing context   readonly attribute WindowProxy window    readonly attribute WindowProxy self             attribute DOMString name     PutForwards href  readonly attribute Location location    readonly attribute History history    readonly attribute UndoManager undoManager    Selection getSelection       Replaceable  readonly attribute BarProp locationbar     Replaceable  readonly attribute BarProp menubar     Replaceable  readonly attribute BarProp personalbar     Replaceable  readonly attribute BarProp scrollbars     Replaceable  readonly attribute BarProp statusbar     Replaceable  readonly attribute BarProp toolbar    void close      void focus      void blur         Truncated   The History API also includes features for scroll restoration on page navigation to persist the scroll position on page load   window history scrollRestoration can be used to check the status of scrollrestoration or change its status  appending   auto   manual   Auto is the default value  Changing it to manual means that you as the developer will take ownership of any scroll changes that may be required when a user traverses the app s history  If you need to  you can keep track of the scroll position as you push history entries with history pushState     ---  Further reading    Scrollbar on Wikipedia Scroll bar  Windows  The Scroll Method The Scroll Method - Microsoft Dev Network iScroll on Github  referenced in the first section above  Scrolling and Scrollbars an article about usability by Jakob Nielsen   Examples   Independent scrolling panels with no body scroll  using just CSS  - Ben Frain  10-21-2014

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

My answer will scroll even when overflow hidden   using jQuery   For example  scroll horizontally with the mouse wheel    lt script src  http   ajax googleapis com ajax libs jquery 1 10 2 jquery min js  gt  lt  script gt   lt script type  text javascript  src   js jquery mousewheel min js  gt  lt  script gt   lt script type  text javascript  gt        function                YourSelector   mousewheel function event  delta               this scrollLeft -   delta   30             event preventDefault                        lt  script gt

User · Answer

Set overflow  hidden  on the body tag like this    lt style type  text css  gt      body           overflow  hidden         lt  style gt    The code above hides both the horizontal and vertical scrollbar   If you want to hide only the vertical scrollbar  use overflow-y    lt style type  text css  gt      body           overflow-y  hidden         lt  style gt    And if you want to hide only the horizontal scrollbar  use overflow-x    lt style type  text css  gt      body           overflow-x  hidden         lt  style gt      Note  It ll also disable the scrolling feature  Refer to the below answers if you just want to hide the scroll bar  but not the scroll feature

User · Answer

In addition to Peter s answer    element  -webkit-scrollbar       display  none      This will work the same for Internet nbsp Explorer nbsp 10     element         -ms-overflow-style  none

User · Answer

Copy this CSS code to the customer code for hiding the scroll bar    lt style gt         -webkit-scrollbar          display  none              element  -webkit-scrollbar          display  none          lt  style gt

User · Answer

I believe you can manipulate it with the overflow CSS attribute  but they have limited browser support  One source said it was Internet nbsp Explorer 5  and later   Firefox 1 5  and later   and Safari 3  and later  - maybe enough for your purposes   Scrolling  Scrolling  Scrolling has a good discussion

User · Answer

Can CSS be used to hide the scroll bar  How would you do this   If you wish to remove vertical  and horizontal  scrollbars from a browser viewport  add  style  quot position  fixed  quot   to the  lt body gt  element   Javascript  document body style position    fixed     CSS  body     position  fixed

User · Answer

I think I found a workaround for you guys if you re still interested  This is my first week  but it worked for me      lt div class  contentScroller  gt       lt div class  content  gt       lt  div gt   lt  div gt    contentScroller  overflow-y  auto  visibility  hidden    content  visibility  visible

User · Answer

My HTML is like this    lt div class  container  gt     lt div class  content  gt     lt  div gt   lt  div gt    Add this to your div where you want to hide the scrollbar    content     position  absolute    right  -100px    overflow-y  auto    overflow-x  hidden    height  75      This can be any value of your choice        And add this to the container   container     overflow-x  hidden    max-height  100     max-width  100

User · Answer

I just thought I d point out to anyone else reading this question that setting overflow  hidden  or overflow-y  on the body element didn t hide the scrollbars for me   I had to use the html element

User · Answer

WebKit supports scrollbar pseudo elements that can be hidden with standard CSS rules      element  -webkit-scrollbar       display  none      If you want all scrollbars hidden  use    -webkit-scrollbar       display  none      I m not sure about restoring - this did work  but there might be a right way to do it     -webkit-scrollbar       display  block      You can of course always use width  0  which can then be easily restored with width  auto  but I m not a fan of abusing width for visibility tweaks   Firefox 64 now supports the experimental scrollbar-width property by default  63 requires a configuration flag to be set   To hide the scrollbar in Firefox 64    element       scrollbar-width  none      To see if your current browser supports either the pseudo element or scrollbar-width  try this snippet    x000D   x000D   content   x000D       These rules create an artificially confined space  so we get x000D       a scrollbar that we can hide  They are not directly involved in x000D       hiding the scrollbar     x000D   x000D    border  1px dashed gray  x000D    padding   5em  x000D   x000D    white-space  pre-wrap  x000D    height  5em  x000D    overflow-y  scroll  x000D    x000D   x000D   content   x000D       This is the magic bit for Firefox    x000D    scrollbar-width  none  x000D    x000D   x000D   content  -webkit-scrollbar   x000D       This is the magic bit for WebKit    x000D    display  none  x000D    x000D   lt div class  content  gt  x000D  Lorem ipsum dolor sit amet  consectetur adipiscing elit  Mauris eu x000D  urna et leo aliquet malesuada ut ac dolor  Fusce non arcu vel ligula x000D  fermentum sodales a quis sapien  Sed imperdiet justo sit amet venenatis x000D  egestas  Integer vitae tempor enim  In dapibus nisl sit amet purus congue x000D  tincidunt  Morbi tincidunt ut eros in rutrum  Sed quam erat  faucibus x000D  vel tempor et  elementum at tortor  Praesent ac libero at arcu eleifend x000D  mollis ut eget sapien  Duis placerat suscipit eros  eu tempor tellus x000D  facilisis a  Vivamus vulputate enim felis  a euismod diam elementum x000D  non  Duis efficitur ac elit non placerat  Integer porta viverra nunc  x000D  sed semper ipsum  Nam laoreet libero lacus  x000D   x000D  Sed sit amet tincidunt felis  Sed imperdiet  nunc ut porta elementum  x000D  eros mi egestas nibh  facilisis rutrum sapien dolor quis justo  Quisque x000D  nec magna erat  Phasellus vehicula porttitor nulla et dictum  Sed x000D  tincidunt scelerisque finibus  Maecenas consequat massa aliquam pretium x000D  volutpat  Duis elementum magna vel velit elementum  ut scelerisque x000D  odio faucibus  x000D   lt  div gt  x000D   x000D   x000D       Note that this is not really a correct answer to the question  because it hides the horizontal bars as well  but that s what I was looking for when Google pointed me here  so I figured I d post it anyway

User · Answer

I wrote a WebKit version with some options like auto hide  little version  scroll only-y  or only-x     scrollable       size  15px       little version ratio  2       scrollbar-bg-color  rgba 0 0 0 0 15        scrollbar-handler-color  rgba 0 0 0 0 15        scrollbar-handler-color-hover  rgba 0 0 0 0 3        scrollbar-coner-color  rgba 0 0 0 0        overflow-y  scroll      overflow-x  scroll      -webkit-overflow-scrolling  touch      width  100       height  100         amp   -webkit-scrollbar           background  none          width   size          height   size              amp   -webkit-scrollbar-track           background-color  scrollbar-bg-color          border-radius   size              amp   -webkit-scrollbar-thumb           border-radius   size          background-color  scrollbar-handler-color           amp  hover              background-color  scrollbar-handler-color-hover                        amp   -webkit-scrollbar-corner         background-color   scrollbar-coner-color              amp  little           amp   -webkit-scrollbar               background  none              width   size    little version ratio              height   size    little version ratio                     amp   -webkit-scrollbar-track               border-radius   size    little version ratio                     amp   -webkit-scrollbar-thumb               border-radius   size    little version ratio                        amp  autoHideScrollbar          overflow-x  hidden          overflow-y  hidden           amp  hover              overflow-y  scroll              overflow-x  scroll              -webkit-overflow-scrolling  touch               amp  only-y                  overflow-y  scroll  important                  overflow-x  hidden  important                              amp  only-x                  overflow-x  scroll  important                  overflow-y  hidden  important                                      amp  only-y not  autoHideScrollbar           overflow-y  scroll  important          overflow-x  hidden  important              amp  only-x not  autoHideScrollbar           overflow-x  scroll  important          overflow-y  hidden  important            http   codepen io hicTech pen KmKrjb

User · Answer

As the other people already said  use CSS overflow   But if you still want the user to be able to scroll that content  without the scrollbar being visible  you have to use JavaScript   Se my answer here for a solution  Hide scrollbar while still being able to scroll with mouse keyboard

User · Answer

Use the CSS overflow property    noscroll     width  150px    height  150px    overflow  auto     Or hidden  or visible        Here are some more examples    overflow-x  overflow-y tests  The CSS Overflow Property

User · Answer

Cross browser approach to hiding the scrollbar   It was tested on Edge  Chrome  Firefox  and Safari   Hide scrollbar while still being able to scroll with mouse wheel    Codepen     Make parent invisible     parent       visibility  hidden      overflow  scroll        Safari and Chrome specific style  Don t need to make parent invisible  because we can style WebKit scrollbars     parent not   root      visibility  visible        Make Safari and Chrome scrollbar invisible     parent  -webkit-scrollbar     visibility  hidden        Make the child visible     child       visibility  visible

User · Answer

If you re looking for a solution to hide a scrollbar for mobile devices  follow Peter s answer   Here s a jsfiddle  which uses the solution below to hide a horizontal scrollbar    scroll-wrapper      overflow-x  scroll     scroll-wrapper  -webkit-scrollbar        display  none       It was tested on a Samsung tablet with Android 4 0 4  Ice Cream Sandwich  both in the native browser and Chrome  and on an iPad with iOS nbsp 6  both in Safari and Chrome

User · Answer

Here s my solution  which theoretically covers all modern browsers   html       scrollbar-width  none     For Firefox        -ms-overflow-style  none     For Internet Explorer and Edge       html  -webkit-scrollbar       width  0px     For Chrome  Safari  and Opera        html can be replaced with any element you want to hide the scrollbar of   Note  I ve skimmed the other 19 answers to see if the code I m posting has already been covered  and it seems like no single answer sums up the situation as it stands in 2019  although plenty of them go into excellent detail  Apologies if this has been said by someone else and I missed it

[css] Hiding the scroll bar on an HTML page

Examples related to css

Examples related to browser

Examples related to scrollbar