移动端布局 - 纵向/横向滚动条CSS 滚动条样式 -webkit-scrollbar 特性概述 ::-webkit-s

CSS 滚动条样式 -webkit-scrollbar

特性概述

::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。
如果没有设置 overflow:scroll;，元素的滚动条将不会显示。
::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。
该特性是非标准的，请尽量不要在生产环境中使用！

属性汇总

::-webkit-scrollbar——整个滚动条。
::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
::-webkit-scrollbar-track——滚动条轨道。
::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块，例如textarea的可拖动按钮。

以上属性，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果，也包含有width,height,background,border，相当于块元素。

关键代码

.invisible-scrollbar{ 
    display: flex; 
    overflow: auto; 
}
.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Demonstrate a "mostly customized" scrollbar
 * (won't be visible otherwise if width/height is specified) */
.mostly-customized-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #aaa; /* or add it to the track */
}

/* Add a thumb */
.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}

移动端纵向及横向滚动条示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height:100%;
        }
        .navigation{
            height: 8%;
            display: flex;
            /* ::webkit-scrollbar使用前，需要添加overflow:auto; */
            overflow: auto;
            cursor: pointer;
        }
        .navigation>div{
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex:none;
            background-color: paleturquoise;
            padding: 0 2%;
        }
        .navigation>div:hover{
            background-color: white;
        }
        .navigation::-webkit-scrollbar{ 
            /* ::webkit-scrollbar用display:none让滚动条不显示 */
            display: none;        
        }
        
        .main_article{
            height: calc(100% - 16%);
            display: flex;
        }
        .side_nav{
            width: 28%;
            overflow: scroll;
        }
        .side_nav::-webkit-scrollbar{
            display: none;
        }
        .side_nav>div{
            height: 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .side_nav>div:hover{
            background-color: whitesmoke;
        }
        .main_page{
            width: calc(100% - 28%);
            background-color: whitesmoke;
            display: flex;
            flex-wrap: wrap;
            overflow: scroll;
        }
        .main_page::-webkit-scrollbar{
            display: none;
        }
        .main_page>div{
            width: 44%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin: 3%;
        }
        .main_page>div>img{
            width: 100%;
        }
        .footer{
            height: 8%;
            display: flex;
            background-color: bisque;
        }
        .footer>div{
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer>div:hover{
            background-color: white;
        }        
    </style>
</head>
<body>
    <header class="navigation">
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
        <div>今日推荐</div>
    </header>
    <section class="main_article">
        <div class="side_nav">
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
            <div>生鲜类</div>
        </div>
        <div class="main_page">
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
            <div><img src="./920333fc0bb6239833eac5561adcb293.jpeg" alt=""><span>CSS生鲜</span></div>
        </div>
    </section>
    <footer class="footer">
        <div>首页</div>
        <div>首页</div>
        <div>首页</div>
        <div>首页</div>
        <div>首页</div>
    </footer>
</body>
</html>

移动端布局-纵向横向滚动示例.gif

文章如有纰漏，还请各位前辈指正，感谢Thanks♪(･ω･)ﾉ。