How to implement CSS to hide the scroll bar and scroll the content
This article focuses on "how to achieve CSS to hide the scroll bar and scroll the content", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve CSS to hide the scroll bar and scroll the content"!
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-end daily newspaper, but you can scroll the content by moving the mouse up. What kind of technology is this? In fact, I just hid the scroll bar through positioning.
Here is a simplified version of the code
.
. 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 other blogs, similar to the idea above, but there is another 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
The article also shares a way to hide scroll bars through CSS, but this method is not compatible with IE and can be used as a mobile device.
That is the pseudo-object selector of the custom scroll bar::-webkit-scrollbar. For more information, 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;}
At this point, I believe you have a deeper understanding of "how to achieve CSS to hide the scroll bar and scroll the content". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
