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

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

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

父元素设置内容溢出隐藏，使含滚动条元素的滚动条挤出可视区域，即实现了对滚动条的隐藏。

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