css怎么隐藏滚动条

背景

我们需要实现这样的功能，在隐藏滚动条的时候，还需要保留滚动的功能，那么我们应该如何操作呢？

做法

1. 法一：
   ①使用伪类隐藏滚动条（仅限Chrome与Safari）
   ②scrollbar-width: none;（仅限firefox）
   ③-ms-overflow-style: none;（仅限IE 10+）

   /* 隐藏滚动条 */
   .element {
      width: 100%;
      height: 72px;
      box-sizing: border-box;
      padding-top: 16px;
      overflow-x: scroll; /* 设置溢出滚动 */
      white-space: nowrap;
      overflow-y: hidden;
      /* 隐藏滚动条 */
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
   }
   .element::-webkit-scrollbar {
   	display: none; /* Chrome Safari */
   }
   

2. 法二：
   可滚动的容器外层再签套一个父盒子，父盒子设置overflow:hidde，再配合position，变相隐藏滚动条

    <div class="outer-container">
        <div class="inner-container">
        </div>
    </div>
   

   .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;
   }