Comment masquer la barre de défilement div en CSS-Questions et réponses frontales-php.cn

Comment masquer la barre de défilement div en CSS

藏色散人

Libérer： 2023-01-05 16:07:56

original

3842 Les gens l'ont consulté

Comment masquer la barre de défilement div en CSS : créez d'abord un exemple de fichier HTML ; puis définissez du contenu de texte dans le corps ; puis définissez la hauteur de la partie de défilement ; :none;" attribut C'est tout.

Comment masquer la barre de défilement div en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

css Ajouter le défilement au div et masquer la barre de défilement, ou modifier la couleur de la piste de la barre de défilement

Dans la partie html

<div class="box">
    <div>下面内容会单独滚动</div>
    <div class="scroll">
        <div class="content">
            <p>1111111111111111</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
            <p>1111111111111111</p>
            <p>222222222222222</p>
            <p>333333333333333</p>
            <p>4444444444444444</p>
        </div>
    </div>
</div>

Copier après la connexion

css

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
    .content::-webkit-scrollbar {
        display: none;/*隐藏滚动条*/
    }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

Copier après la connexion

Ou si besoin Modifiez le style de la barre de défilement et utilisez le style suivant

<style>
    div{
        font-size: 15px;
        margin-bottom: 20px;
    }
    .content{
        height: 300px;v // 必须设定滚动部分的高度
        background-color: cadetblue;
        color: antiquewhite;
        overflow-x: hidden; /*x轴禁止滚动*/
        　　　　 overflow-y: scroll;/*y轴滚动*/
    }
         .content::-webkit-scrollbar{ //设置滚动条宽高
             width:8px;
             height:8px
        }
         .content::-webkit-scrollbar-track{// 滚动条轨道样式
              -webhit-box-shadow: inset 0 0 5px transparent;
              border-radius:0;
              background:transparent;
         }
         .content::-webkit-scrollbar-thumb{//滚动条样式
            border-radius:5px;
            -webkit-box-shadow:inset 0 0 5px #242B56;
            background:#242B56;  
         }
    p{
        margin-bottom: 30px;
        font-size: 17px;
        color: #333;
    }
</style>

Copier après la connexion

[Apprentissage recommandé : Tutoriel vidéo CSS]

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!