How to hide the scroll bar in css3

The way to hide the scroll bar in css3 is to customize the pseudo-object selector of the scroll bar [::-webkit-scrollbar], such as [.element::-webkit-scrollbar { width: 0 !important } 】.

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

Many times we will encounter this situation at work, where we need to hide the scroll bar and support scrolling. So what should we do when encountering this situation? Maybe the first reaction of many people is to use the iscroll plug-in, but I prefer to use css to achieve this function. Let’s take a look at the specific methods below.

Method 1: Calculate the width of the scroll bar and hide it

You only need to hide the scroll bar by positioning it.

<div class="outer-container">
    <div class="inner-container">
    	......
    </div>
</div>

.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 equal to the width of the scroll bar. This value was obtained by manual debugging. No problem found in chrome and IE.

Method 2: Surrounded by three containers, no need to calculate the width of the scroll bar

This code was first seen on the Microsoft blog. It is similar to the idea above, except that Another box was added to the house, limiting the content to the box. This way you can't see the scroll bar and still be able to scroll. The code is as follows:

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>

.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 hidden scroll bar

Pseudo-object selector of custom scroll bar::-webkit-scrollbar.

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

IE 10

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

Firefox

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

Free learning video sharing: css video tutorial

The above is the detailed content of How to hide the scroll bar in css3. For more information, please follow other related articles on the PHP Chinese website!