css 實現隱藏滾動條可以滑動 模擬今日頭條導航欄效果

<div id="app">
    <nav>
        <p>你好1</p>
        <p>你好2</p>
        <p>你好3</p>
        <p>你好4</p>
        <p>你好5</p>
        <p>你好6</p>
        <p>你好7</p>
        <p>你好8</p>
        <p>你好1</p>
        <p>你好2</p>
        <p>你好3</p>
        <p>你好4</p>
    </nav>
</div>

       <style type="text/css">
            #app {
                height: 300px;
                overflow-x: hidden;
                line-height: 30px;
                text-align: center;
            }
            
            #app nav::-webkit-scrollbar {
                width: 0 !important;
                height: 0 !important;
            }
            
            #app nav {
                padding: 0 10px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: middle;
                -ms-flex-align: middle;
                align-items: middle;
                overflow: auto;
            }
            
            #app p {
                text-align: center;
                font-size: 36px;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                padding: 10px;
                margin: 5px;
            }
        </style>