Hiding scrollbars while also supporting scrollbars is something we often see in front end development. The most obvious thing to think of is adding an iscroll plugin, but CSS can now do this as well. I’ve used it in many places.

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 in the front section of the daily news, but you can scroll the content by moving the mouse over it. What kind of technology is that? I’m just hiding 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;
}
Copy the code

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

Method 2: Use three containers around each other without counting the width of the scroll bar

I first saw this code on the Microsoft blog, which is similar to what I did above, except that I added a box to restrict the content inside the box. So you can’t see the scroll bar and you can scroll at the same time.

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;
}
Copy the code

Method 3: Hide the scrollbar in the CSS

The article also shares a way to hide scrollbars using CSS, but this method is not compatible with IE and can be used on mobile devices.

This is the pseudo-object selector for custom scrollbar ::-webkit-scrollbar, see the previous article: CSS3 Custom WebKit scrollbar styles

Chrome and Safari

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

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

.element { overflow: -moz-scrollbars-none; }
Copy the code

Source: Front-end development blog