橫向滾動 在業(yè)務(wù)中還是比較常見的，比如我們的有些導(dǎo)航就是橫向滾動的。
橫向滾動其實(shí)通過css就是簡單的快速實(shí)現(xiàn)
核心的代碼就是這兩行
overflow-x: scroll; 開啟滾動
white-space: nowrap; 禁止換行

ul {
            list-style: none;
            overflow-x: scroll;
            white-space: nowrap;
            padding: 15px;
        }
        li {
            width: 40px;
            height: 40px;
            display: inline-block;
            background-color: #f00;
            margin-right: 20px;
        }
        li:last-child {
            margin-right: 0;
        }

<ul>    
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

其實(shí)滾動起來 可能還有一個(gè)橫向的滾動條。 我們也可以嘗試把滾動條去掉 但是
有一個(gè)谷歌上能去掉的方案

ul::-webkit-scrollbar{
			width: 0;
		}

-webkit- 內(nèi)核的瀏覽器上
加上這個(gè)在谷歌的瀏覽器上就沒有。

關(guān)注我。持續(xù)更新 前端知識。