H5 頁面橫向滾動條隱藏
阿新 • • 發佈：2019-02-20
今天碰到的問題，請看下面的解決辦法
問題場景：微信 iOS 客戶端 webview 下 H5 頁面橫向滾動條不隱藏
以往的做法：
通過
::webkit-scrollbar {
display: none;
}
附案例：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>橫向滑動</title> <style type="text/css"> ::-webkit-scrollbar { display: none; } /*//或者: ::-webkit-scrollbar { width: 0; height: 0; }*/ .slide-box{ margin-top: 200px; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; } .slide-item{ width: 200px; height: 200px; border:1px solid #ccc; margin-right: 30px; } </style> </head> <body> <div class="slide-box"> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> </div> </body> </html>
但是
微信 webview 核心由 UIWebView 升級到新核心 WKWebView 後，就不生效了
問題分析：只要添加了 -webkit-overflow-scrolling: touch 平滑滾動屬性，隱藏滾動條樣式就會失效。
新的思路
<div class="slider">
<ul></ul>
</div>
.slider {
overflow: hidden;
}
.slider ul {
padding-bottom: 10px;
margin-bottom: -10px;
}
附案例：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>橫向滑動</title> <style type="text/css"> .slide-box{ margin-top: 200px; overflow: hidden; } .slide-within{ display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; padding-bottom: 10px; margin-bottom: -10px; } .slide-item{ width: 200px; height: 200px; border:1px solid #ccc; margin-right: 30px; } </style> </head> <body> <div class="slide-box"> <div class="slide-within"> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> <div class="slide-item"></div> </div> </div> </body> </html>