Hidding the main scroll bar In a page using css

Question

I want to remove only the top level scrollbar while preserving a few inside the page.

I found this but it removes all the scrollbars.

::-webkit-scrollbar
{
  display:none;
}

Using overflow: hidden; on the body's css seems to do what I want but I'm unable to scroll down the page.

To sum it up, I want to hide only the main page scrollbar while preserving the rest and being able to scroll?

can you do `body::-webkit-scrollbar`? although I would have a look at other approaches as the previous will only work on webkit browsers. Have a look at this: https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — Pete, Jun 05 '18 at 09:13

score 0 · Accepted Answer · answered Jun 05 '18 at 09:14

Try:

html, body {

    overflow:hidden;
}

Or:

There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:

.element::-webkit-scrollbar { width: 0 !important }

There is a CSS rule that can hide scrollbars in IE 10+. That rule is:

.element { -ms-overflow-style: none; }

There used to be a CSS rule that could hide scrollbars in Firefox, but it has since been deprecated. That rule was:

.element { overflow: -moz-scrollbars-none; }

This seems to work so far. I'll check if it doesn't create some problems down the road. — Juan Antonio Rodríguez Gabriel, Jun 05 '18 at 11:57

1 Answers1