H5 页面横向滚动条隐藏

[liqinuo]

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

以往的做法

::webkit-scrollbar {
    display: none;
}

但是

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

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

新的思路

把滚动条撑开，然后通过负值的外边距抵消撑开的部分，使得外容器高度不受影响，从而大道滚动条溢出隐藏

<div class="slider">
    <ul></ul>
</div>

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