H5 页面隐藏滚动条详解(附源码)

2,736 阅读1分钟

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

问题场景:微信 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>