Mobile page to get closer to the native experience, can I hide the scroll bar and make sure the page scrolls?
overflow:hiddenThe hidden scrollbar is used, but the problem is that the page or element loses its scrolling characteristics.
Because only the mobile browser (Chrome and Safari) is compatible, the pseudo-object selector for the custom scroll bar
::-webkit-scrollbar。
The introduction of this selector can be consulted:
Styling Scrollbars
Custom Scrollbars in WebKit
Use the following CSS to hide the scroll bar:
.element::-webkit-scrollbar {display:none}
If you want to be compatible with the PC other browsers (IE, Firefox, etc.), a foreign talent Lady John Kurlak also developed a method. Nesting a layer overflow:hidden of internal content outside the container, and then restricting the size to the outer nesting layer, hides it in disguise.
<divClass="Outer-container"><divClass="Inner-container"> <div class="Content"> ... </div> </div> </div>
. Outer-container,. Content{Width:200px;Height:200px;}. Outer-container{Position: Relative;Overflow: Hidden;}. Inner-container{Positionleft: 0; overflow-x: Hidden ; overflow-y: Scroll ; /* for Chrome */.inner-container::-webkit-scrollbar {display: None
/span>
CSS implements hidden scroll bars and can scroll