css隐藏移动端滚动条（兼容ios）

尝试过很多类似 .container ::-webkit-scrollbar {display: none;}操作会发现，这些在苹果浏览器根本就不起效果。

既要隐藏滚动条、滑动流畅，还要兼容ios，可尝试以下思路：

父元素设置内容<font color=#ff0000>溢出隐藏</font>，使含滚动条元素的滚动条<font color=#ff0000>挤出</font>可视区域，即实现了对滚动条的隐藏。

示例代码：

html:

<div class="compatible-ios">
  <ul>
       <li>第一个哈哈</li>
       <li>第一个哈哈</li>
       <li>第一个哈哈</li>
       <li>第一个哈哈</li>
   </ul>
</div>

css:

.compatible-ios{overflow: hidden;height: 40px;}
ul{overflow-x: auto;width: 300px;height: 30px;white-space: nowrap;padding-bottom: 10px;}
ul::-webkit-scrollbar{width: 0px;height: 0px;}
li{list-style: none;padding: 2px 4px;background: rgba(1,1,1,.05);border-radius: 4px;margin: 0 6px 8px 0;display: inline-block;font-size: 12px;}