Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how css3 hides the scroll bar". In daily operation, I believe many people have doubts about how to hide the scroll bar in css3. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to hide the scroll bar by css3". Next, please follow the editor to study!

Css3 hides the scroll bar by customizing the pseudo-object selector of the scroll bar [::-webkit-scrollbar], such as [.element::-webkit-scrollbar {width: 0! important}].

This article operating environment: windows10 system, css 3, thinkpad T480 computer.

In many cases, we encounter this situation at work, where we need to hide the scroll bar and support scrolling. So what should we do in such a situation? Many people's first reaction may be to use the iscroll plug-in, but I prefer to use css to do this. Next, let's take a look at the specific methods.

Method 1: calculate the scroll bar width and hide it

Just hide the scroll bar by positioning it.

. .outer-container {width: 360px; height: 200px; position: relative; overflow: hidden;}. Inner-container {position: absolute; left: 0; top: 0; right:-17px; bottom: 0; overflow-x: hidden; overflow-y: scroll;}

This code cleverly moves 17 pixels to the right, which is exactly the width of the scroll bar. This value is from my manual debugging. No problems were found in chrome and IE.

Method 2: surround it with three containers without calculating the width of the scroll bar

The code was first seen on the Microsoft blog, similar to what I thought above, except that there was an extra box in the family to limit the content to the box. In this way, you can't see the scroll bar and scroll at the same time. The code is as follows:

. .element, .outer-container {width: 200px; height: 200px;} .outer-container {border: 5px solid purple; position: relative; overflow: hidden;} .inner-container {position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll;} .inner-container::-webkit-scrollbar {display: none;}

Method 3:css hides the scroll bar

Customize the pseudo-object selector for the scroll bar::-webkit-scrollbar.

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

IE 10 +

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

Firefox

Element {overflow:-moz-scrollbars-none;} at this point, the study on "how to hide the scroll bar by css3" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.