Reprinted from:Juejin. Cn/post / 684490…

Questions to clarify

What is a scrollbar?

The scroll bar refers to the part of the image on the right that is marked with red:

The scroll bar appears whenever the page content is larger than the window.

In general, use overflow: hidden if it’s not a body level scroll bar; This solves the scrollbar problem, but it also makes the page unscroll.

At present, there are many teaching methods that can hide non-body scroll bars and scroll pages on the Internet, so this article focuses on how to hide the scroll bars of the browser (i.e. the body level).

The solution

For different browsers, there are different methods to hide the scroll bar. The following describes the three major browsers chrome, IE (including Edge), and Firefox respectively:

Chorme

body::-webkit-scrollbar {
    display: none;
}
Copy the code

IE/Edge

body {
    -ms-overflow-style: none;
}
Copy the code

Firefox

Firefox is the most troublesome of the three:

html { overflow: -moz-hidden-unscrollable; / * note! */ height: 100%; } body { height: 100%; width: calc(100vw + 18px); /* The length of the browser scroll bar is about 18px*/ overflow: auto; }Copy the code

And that doesn’t end there, you have to add width: 100vw; .

Suppose your HTML looks like this:

<body>
    <div id="example-1"> <p> <p> <p> </p> </div> <article id="example-2"< p style = "margin-top: 1em; margin-bottom: 1em; </h1> <p> Mexi, Jinqi, Deyan River. Low material no. </p> <button> </article> </body>Copy the code

Your CSS should also add:

#example-1 {
    width: 100vw;
}

#example-2 {
    width: 100vw;
}
Copy the code

conclusion

To sum up, if you want the scrollbars to be hidden and scrolling in all three browsers, your CSS should look at least like this:

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

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

body {
    -ms-overflow-style: none;
    height: 100%;
	width: calc(100vw + 18px);
	overflow: auto;
}
Copy the code

As for the width: 100 vw; Where to add it depends on how your HTML structure looks.

advantages

This allows the reader to focus more on the text and not be too lazy to look at the scrollbar when it is too short, jump out of the page, or pull the scrollbar straight down in a hurry. In other words, force the reader to read the content slowly.

disadvantages

If the reader wants to look back, he may have to roll for a long time. So, if you want to hide scrollbars for longer text, it is recommended to have navigation columns so that the reader can quickly jump to a certain point.