search ]

Hide Scrollbars While Allowing Scrolling with CSS

In some cases you may want to hide the scrollbars that appear on an element while still allowing the user to scroll. You can do this with the following CSS when the class .element is the element you want to hide scrollbars for:

.element::-webkit-scrollbar {
    width: 0;
    height: 0
}

.element {
   scrollbar-width: none;
}

Say you want to hide the scrollbars that appear for the <html> tag. You can do this with the following CSS:

::-webkit-scrollbar {
    width: 0;
    height: 0
}

html {
   scrollbar-width: none;
}

Note: This will not work in Safari and likely not in Internet Explorer.

For more scrollbar customization, see Style Scrollbars Using CSS.

Join the Discussion
0 Comments  ]

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!

Savvy WordPress Development official logo