今天碰到的问题,请看下面的解决办法
问题场景:微信 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>