CSS realizes hiding scroll bar while retaining scroll function

Sometimes, in order to be closer to the original experience, the mobile end page needs to consider hiding the scroll bar, but it is necessary to ensure that the page (or related areas) can still scroll. For example, in order not to limit the number of menus, some website navigation often keeps the width or height adaptive. In this case, the display of scroll bars will inevitably affect the aesthetics.

We know that using overflow: hidden can hide the scroll bar, but the direct result is that the page or element has lost its scrolling feature. Because it only needs to be compatible with mobile browsers (Chrome and Safari), which means that it supports CSS3, it came up with the idea of a pseudo object selector for custom scrollbars:: - webkit scrollbar. In fact, CSS can hide the scrollbar while retaining the scrolling function in one sentence of code:

.element::-webkit-scrollbar {display:none}

If it is necessary to be compatible with other PC browsers (IE, Firefox, etc.), the front-end experts have also developed other methods: nesting a layer of overflow outside the container: the internal content of hidden will be hidden in disguise if the size of the internal content is limited to the external nesting layer. However, this method requires a fixed width or height.

 <div class="outer-container">      <div class="inner-container">         <div class="content">             ......         </div>      </div>  </div>.outer-container,.content {     width: 200px;  height: 200px; } .outer-container {     position: relative;     overflow: hidden; } .inner-container {     position: absolute;  left: 0;     overflow-x: hidden;     overflow-y: scroll; } /* for Chrome */ .inner-container::-webkit-scrollbar {     display: none; }