css出现滚动条-H5页面隐藏滚动条解读（附源码）

bendan520 2023年8月23日 css 0

今天遇到的问题css出现滚动条css出现滚动条，请看下面的解决方案

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