Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.