How CSS implements scroll bar shadowing but the mouse can still scroll

When doing mobile projects, there are times when elements need to go beyond the screen to scroll, and to hide the scroll bar for aesthetics. If you only need to be compatible with Chrome and Safari, you can use the pseudo-object selector--::webkit-scrollbar of your custom scroll bar.

Specific use is: Element::webkit-scrollbar{display:none} or Element::webkit-scrollbar{width:0!important}

What about the same functionality on the PC side? Refer to hiding Vertical Scrollbars with the Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari implementations as follows:

Html

<Divclass= "Outer-container"> <Divclass= "Inner-container"> <Divclass= "Content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, EU tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est cong UE lectus, UT sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam ID aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, Orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus Ullam Corper arcu sit amet mauris egestas egestas. Vestibulum turpis Neque, condimentum a tincidunt quis, Molestie vel justo. Sed molestie nunc dapibus arcu feugiat, UT sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero.  Curabitur aliquam in ante eu ultricies. Quisque vitae tincidunt purus. Vivamus FeugIAT bibendum erat, nec interdum urna porta sed. Nunc lobortis neque orci, UT suscipit nisl congue feugiat. Vivamus feugiat tellus quis cursus sollicitudin. Curabitur dolor massa, dictum ut ipsum in, Porttitor pellentesque ante. Aenean egestas cursus tempor. Maecenas semper tortor sit amet egestas cursus. Mauris porttitor quis nisi ut tincidunt. Curabitur adipiscing eleifend nibh. Praesent mauris Leo, consequat vitae orci eget, Vestibulum bibendum nisi. Aliquam tempus diam ut tortor cursus, eget sodales augue adipiscing.  Nulla at Dignissim libero.</Div> </Div> </Div>

Css

. Content,. Outer-container{width:200px;Height:200px;}. Outer-container{position:relative;Overflow:Hidden;}. Inner-container{position:Absolute; Left:0;Overflow-x:Scroll;overflow-y:Scroll;}. Inner-container::-webkit-scrollbar{Display:None;}

The implementation principle of the scheme: to the outer div and the main content of the div set the same width and height, Then. Inner-container sets the absolute positioning relative to the. Outer-container, so that. Inner-container is out of the document flow, the wide-high sub-elements open up, and the additional setting of their own scrolling properties, but because the outermost div width is high fixed, so. Inner-contain The ER scroll bar is not visible, in fact it can be scrolled

How CSS implements scroll bar shadowing but the mouse can still scroll