H5 页面隐藏滚动条详解（附源码）

最新推荐文章于 2024-05-27 16:21:48 发布

刺心疯

最新推荐文章于 2024-05-27 16:21:48 发布

阅读量2.3k

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/100096736

版权

HTML5 专栏收录该内容

201 篇文章 10 订阅

订阅专栏

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

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

刺心疯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5 页面隐藏滚动条详解（附源码）

今天碰到的问题，请看下面的解决办法问题场景：微信 iOS 客户端 webview 下 H5 页面横向滚动条不隐藏以往的做法：通过::webkit-scrollbar { display: none;}附案例：<!DOCTYPE html><html><head> <meta name="viewport" con...
复制链接

扫一扫