H5 页面横向滚动条隐藏

参考：https://github.com/o2team/H5Skills/issues/72

今天碰到的问题，请看下面的解决办法

问题场景：微信 iOS 客户端 webview 下 H5 页面横向滚动条不隐藏

 

以往的做法：

通过

::webkit-scrollbar {
    display: none;
}

附案例：

但是

微信 webview 内核由 UIWebView 升级到新内核 WKWebView 后，就不生效了

问题分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滚动属性，隐藏滚动条样式就会失效。

新的思路

 

.slider {
    overflow: hidden;
}
.slider ul {
    padding-bottom: 10px;
    margin-bottom: -10px;
}

附案例：