CSS achieves the effect of hiding the scroll bar and scrolling the content (three ways)

We often encounter this situation in front-end development, where we need to support scrolling while hiding the scroll bar. The easiest way to think of it is to add an iscroll plug-in, but in fact, CSS can also achieve this function now. I have used it in many places. Let's take a look at these three methods.

Method 1: Calculate the scroll bar width and hide it

In the sidebar of this site, you can see that there is no scroll bar for the front-end daily report, but you can scroll the content by moving the mouse over it. What is this technology? In fact, I just hid the scroll bar by positioning it.

Demo

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

This code cleverly moves the scroll bar 17 pixels to the right, which is exactly the width of the scroll bar. I got this value by manual debugging. No problem found in Chrome and IE.

Method 2: Use three containers to surround it, no need to calculate the width of the scroll bar

I first saw this code on a Microsoft blog. It is similar to my idea above, except that they added an extra box inside to confine the content inside the box. This way you can scroll without seeing the scroll bar.

The code is as follows:

<div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        </div>
     </div>
 </div>
//code from http://caibaojian.com/hide-scrollbar.html
.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 the scroll bar with CSS

At the same time, the article also shares a method to hide the scroll bar through CSS, but this method is not compatible with IE and can only be used for mobile terminals.
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; }

Summarize

This concludes this article about how to use CSS to hide the scroll bar and scroll the content (three ways to achieve it). For more information about how to use CSS to hide the scroll bar and scroll the content, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!