css隱藏行動端捲軸並平滑捲動（程式碼範例）

這篇文章帶給大家的內容是關於css隱藏行動端捲軸並平滑滾動（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

HTML程式碼如下

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>移动端隐藏滚动条解决方案</title>
    <style>
    * {
        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>


    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>

設定捲軸隱藏

.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並非固定值，只要你的設定的值大小足夠將滾動條擠出可視區域即可。

完整程式碼如下：

nbsp;html>



    <meta>
    <meta>
    <meta>
    <title>移动端隐藏滚动条解决方案</title>
    <style>
    * {
        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>


    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>

#

以上是css隱藏行動端捲軸並平滑捲動（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！