How to hide the scroll bar in div css

How to hide the scroll bar in div css: 1. Calculate the width of the scroll bar and hide it; 2. Surround it with three containers, without calculating the width of the scroll bar; 3. Customize the pseudo scroll bar Object selector "::-webkit-scrollbar".

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

3 ways to implement CSS to hide the scroll bar and scroll the content

While hiding the scroll bar, you also need to support scrolling. We often encounter this in front-end development In this case, the easiest thing to think of is to add an iscroll plug-in, but now CSS can also achieve this function. I have used it in many places. Let’s take a look at these three methods.

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

In the sidebar of this site, you can see that the content of the front-end daily report does not have a scroll bar, but moving the mouse up can Scroll content. What technology is this? In fact, I just hide the scroll bar through positioning. Demonstration Below is a simplified version of the code

<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;
}

Demonstration. 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: Hide scroll bars with css

At the same time, the article also shared a method of hiding scroll bars through CSS, but this method is not compatible with IE and can be used on mobile devices. use. That is the pseudo-object selector of the custom scroll bar::-webkit-scrollbar. For details, please see the previous article: CSS3 custom webkit scroll bar style chrome and Safari

.element::-webkit-scrollbar { width: 0 !important }
IE 10+
.element { -ms-overflow-style: none; }
Firefox
.element { overflow: -moz-scrollbars-none; }

More detailed HTML/CSS knowledge , please visit the CSS video tutorial column!

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