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 スマートフォンではスクロールがスムーズではなく、ユーザー エクスペリエンスに影響します。これは Android スマートフォンでは正常です。このとき、次のように CSS コードを追加します: -webkit-overflow-scrolling: touch;

.type {
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
    }

ただし、この時点で新たな問題が発生します。スクロールバーが再び表示されます。 ！ ！
ユーザー エクスペリエンスを高めるには、スクロール バーを非表示にしてスムーズにスクロールするのが最善です。次に、ズームインを開始します。 。 。
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 タイプの外側のコンテナが設定されます。高さは固定されており、コンテンツのオーバーフロー非表示が設定されています。すべてのタイプの垂直方向の余分なコンテンツは表示されません。つまり、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 中国語 Web サイトの他の関連記事を参照してください。