溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css隱藏移動端滾動條并平滑滾動的案例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
HTML代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移動端隱藏滾動條解決方案</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.par-type {
height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.type {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
}
.con {
width: 640px;
height: 100%;
display: flex;
align-items: center;
}
.con>li {
text-align: center;
font-size: 16px;
width: 80px;
color: #fff;
list-style: none;
}
.par-type ::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div>
<nav>
<ul>
<li>推薦</li>
<li>娃娃</li>
<li>日用品</li>
<li>美妝護膚</li>
<li>娃娃</li>
<li>日用品</li>
<li>美妝護膚</li>
<li>娃娃</li>
</ul>
</nav>
</div>
</body>
</html>設置滾動條隱藏
.par-type ::-webkit-scrollbar {display: none;}此時內容可以正常滾動，滾動條也已隱藏，但是ios手機上出現滾動不流暢，影響用戶的體驗，安卓手機上是正常的。此時，加上css代碼：-webkit-overflow-scrolling: touch;即可解決，如下：
.type {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
}但是此時又會出現新的問題，滾動條又出現了！！！
為了用戶的體驗，最好是能流暢滾動并且滾動條是隱藏的，接下來開始放大招了。。。
滾動條是出現在type標簽上的，所以對type進行如下設置：
.type {
/*width: 100%;*/
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
/*縱向超出部分將會隱藏，即滾動條部分被擠出可視區域*/
padding-bottom: 20px;
}ps:
1.type的外層容器設置了固定高度，并且設置了內容溢出隱藏，所有type的縱向的超出內容是不可見的，即：overflow:hidden;
2.padding-bottom等于20px并非固定值，只要你的設置的值大小足夠將滾動條擠出可視區域即可。
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移動端隱藏滾動條解決方案</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.par-type {
height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.type {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
background-color: #999;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
padding-bottom: 20px;
}
.con {
width: 640px;
height: 100%;
display: flex;
align-items: center;
}
.con>li {
text-align: center;
font-size: 16px;
width: 80px;
color: #fff;
list-style: none;
}
.par-type ::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<div>
<nav>
<ul>
<li>推薦</li>
<li>娃娃</li>
<li>日用品</li>
<li>美妝護膚</li>
<li>娃娃</li>
<li>日用品</li>
<li>美妝護膚</li>
<li>娃娃</li>
</ul>
</nav>
</div>
</body>
</html>關于css隱藏移動端滾動條并平滑滾動的案例分析就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
