橫向滾動 在業務中還是比較常見的，比如我們的有些導航就是橫向滾動的。
橫向滾動其實通過css就是簡單的快速實現
核心的代碼就是這兩行
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>

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

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

-webkit- 內核的瀏覽器上
加上這個在谷歌的瀏覽器上就沒有。

關注我。持續更新 前端知識。