Heim >Web-Frontend >Front-End-Fragen und Antworten >So verbergen Sie die Div-Bildlaufleiste in CSS

So verbergen Sie die Div-Bildlaufleiste in CSS

藏色散人
藏色散人Original
2021-04-13 10:31:373839Durchsuche

So blenden Sie die Div-Bildlaufleiste in CSS aus: Erstellen Sie zunächst eine HTML-Beispieldatei. Definieren Sie dann den Textinhalt im Textkörper ;"-Attribut.

So verbergen Sie die Div-Bildlaufleiste in CSS

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

css Scrollen zum Div hinzufügen und die Bildlaufleiste ausblenden oder die Farbe der Bildlaufleistenspur ändern

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

css-Teil

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

Oder wenn Sie den Stil der Bildlaufleiste ändern müssen, verwenden Sie den folgenden Stil

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

[Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Div-Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn