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