In order to make the mobile page more like a native experience, can you hide the scroll bar while keeping the page scrollable?

Use Overflow: Hidden to hide scroll bars, but the problem is that the page or element loses the ability to scroll. Since you only need to be compatible with mobile browsers (Chrome and Safari), the pseudo-object selector for custom scrollbars came to mind :: -webkit-Scrollbar.

 

For a description of this selector, see: Styling Scrollbars Custom Scrollbars in WebKit

 

To hide scrollbars, apply the following CSS:

.element::-webkit-scrollbar {display:none}
Copy the code

If you want to be compatible with other BROWSERS on PC (IE, Firefox, etc.), you can nest overflow:hidden on the outside of the container.

<! DOCTYPEhtml>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <title>CSS allows you to hide scroll bars while scrolling</title>    
    <style type="text/css">
      body{margin: 0;background: #ddd; }.header{width:100%;height: 100px;overflow-x:scroll;overflow-y:hidden; }.content{height: 100px;width: 5000px;background: linear-gradient(to right, green , blue); }.header::-webkit-scrollbar {display:none}

      .outer-container {width: 500px; height: 700px;position: relative;overflow: hidden; }.inner-container {height: 700px;position: absolute; left: 0;overflow-x: hidden;overflow-y: scroll; }.inner-container::-webkit-scrollbar {display: none; }.content2 {height: 5000px;width: 500px;background: linear-gradient(red , blue); }</style>     
</head>      
<body>
  <div class="header">
    <div class="content"></div>
  </div>

  <div class="outer-container">
    <div class="inner-container">
      <div class="content2"></div>
    </div>
  </div>
</body>      
</html> 
Copy the code


\

\

\

Note: Welcome to join the web front-end job hunting qq group: 668352707\