css masque la barre de défilement mobile et le défilement fluide (exemple de code)-tutoriel CSS-php.cn

css masque la barre de défilement mobile et le défilement fluide (exemple de code)

不言

Libérer： 2019-01-24 10:19:47

avant

5622 Les gens l'ont consulté

Le contenu de cet article concerne le masquage de la barre de défilement mobile et le défilement fluide en CSS (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le code HTML est le suivant

<!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>

Copier après la connexion

Définissez la barre de défilement pour qu'elle soit masquée

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

Copier après la connexion

À ce moment, le le contenu peut défiler normalement et la barre de défilement peut également être masquée, mais le défilement n'est pas fluide sur les téléphones iOS, ce qui affecte l'expérience utilisateur. C'est normal sur les téléphones Android. A ce moment, ajoutez le code css : -webkit-overflow-scrolling: touch; pour résoudre le problème, comme suit :

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

Copier après la connexion

Mais à ce moment, un nouveau problème va apparaît, la barre de défilement La voilà à nouveau ! ! !
Pour l'expérience utilisateur, il est préférable de faire défiler en douceur et la barre de défilement est masquée. Ensuite, commençons l'astuce d'agrandissement. . .
La barre de défilement apparaît sur la balise de type, définissez donc le type comme suit :

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

Copier après la connexion

ps :
1 Le conteneur extérieur de type A. une hauteur fixe est définie et le masquage du débordement de contenu est défini. Le contenu excédentaire vertical de tous les types est invisible, c'est-à-dire : overflow:hidden;
2.padding-bottom est égal à 20px et n'est pas défini. une valeur fixe tant que la valeur que vous définissez est suffisamment grande pour faire sortir la barre de défilement de la zone visible.

Le code complet est le suivant :

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!