CSS verbirgt mobile Bildlaufleiste und reibungsloses Scrollen (Codebeispiel)-CSS-Tutorial-php.cn

CSS verbirgt mobile Bildlaufleiste und reibungsloses Scrollen (Codebeispiel)

不言

Freigeben： 2019-01-24 10:19:47

nach vorne

5622 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Ausblenden der mobilen Bildlaufleiste und dem reibungslosen Scrollen in CSS (Codebeispiel). Ich hoffe, dass er für Sie hilfreich ist.

Der HTML-Code lautet wie folgt

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端隐藏滚动条解决方案</title>
    <style type="text/css">
    * {
        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>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>
</body>

</html>

Nach dem Login kopieren

Stellen Sie die Bildlaufleiste so ein, dass sie ausgeblendet wird

.par-type ::-webkit-scrollbar {display: none;}

Nach dem Login kopieren

Zu diesem Zeitpunkt kann der Inhalt sein normal gescrollt und die Bildlaufleiste wurde ausgeblendet, aber das Scrollen ist auf iOS-Telefonen nicht reibungslos, was sich auf das Benutzererlebnis auswirkt. Auf Android-Telefonen ist es normal. Fügen Sie zu diesem Zeitpunkt den CSS-Code hinzu: -webkit-overflow-scrolling: touch;, um das Problem wie folgt zu lösen:

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

Nach dem Login kopieren

Aber zu diesem Zeitpunkt wird ein neues Problem auftreten Die Bildlaufleiste wird wieder angezeigt. ! !
Für das Benutzererlebnis ist es am besten, reibungslos zu scrollen und die Bildlaufleiste auszublenden. Als nächstes beginnen wir mit dem Vergrößerungstrick. . .
Die Bildlaufleiste erscheint auf dem Typ-Tag, also legen Sie den Typ wie folgt fest:

.type {
        /*width: 100%;*/
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        background-color: #999;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        /*纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
        padding-bottom: 20px;
    }

Nach dem Login kopieren

ps:
1 Der äußere Container des Typs wird festgelegt Die Höhe ist festgelegt und das Ausblenden von Inhaltsüberläufen ist festgelegt. Der vertikale Überlaufinhalt ist bei allen Typen unsichtbar, d Solange der Einstellungswert groß genug ist, um die Bildlaufleiste aus dem sichtbaren Bereich zu verdrängen.
Der vollständige Code lautet wie folgt:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>移动端隐藏滚动条解决方案</title>
    <style type="text/css">
    * {
        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>
</head>
<body>
    <div>
        <nav>
            <ul>
                <li>推荐</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
                <li>日用品</li>
                <li>美妆护肤</li>
                <li>娃娃</li>
            </ul>
        </nav>
    </div>
</body>

</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCSS verbirgt mobile Bildlaufleiste und reibungsloses Scrollen (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!