Heim >Web-Frontend >CSS-Tutorial >So fügen Sie Scrollen zu div hinzu und verbergen die Bildlaufleiste mit CSS

So fügen Sie Scrollen zu div hinzu und verbergen die Bildlaufleiste mit CSS

王林
王林nach vorne
2020-04-13 09:17:593129Durchsuche

So fügen Sie Scrollen zu div hinzu und verbergen die Bildlaufleiste mit CSS

css Scrollen zu div hinzufügen und die Bildlaufleiste ausblenden Der spezifische Code lautet wie folgt:

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

(empfohlenes Tutorial: CSS-Tutorial)

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>

Empfohlene verwandte Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo fügen Sie Scrollen zu div hinzu und verbergen die Bildlaufleiste mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:jb51.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen