Bagaimana untuk menetapkan bar skrol div dalam css

Dengan pembangunan halaman web dan aplikasi mudah alih, bar skrol telah menjadi pengalaman pengguna yang sangat diperlukan, dan siri tetapan gaya bar skrol yang disediakan oleh CSS3 membolehkan kami menyesuaikan gaya bar skrol dengan lebih fleksibel Hari ini kita terokai caranya gunakan CSS untuk menetapkan bar skrol div.

1. Tetapan asas

Kami mentakrifkan div dengan kandungan dalam HTML Apabila kandungan melebihi saiz div, kami perlu menggunakan bar skrol untuk melihatnya. Berikut ialah struktur HTML asas:

<div class="wrapper">
  <div class="content">
    <p>这里是一些内容</p>
    <p>这里也是一些内容</p>
    <p>这里还是一些内容</p>
  </div>
</div>

Seterusnya, mari kita tetapkan gaya asas div Anda boleh menambah gaya berikut:

.wrapper {
    width: 300px;
    height: 200px;
    overflow: auto; /* 滚动条设置 */
    margin: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.content {
    width: 100%;
    height: auto;
}

Dengan menetapkan limpahan: auto kepada. .Wrapper Property, supaya apabila bar skrol disembunyikan, bar skrol akan muncul apabila saiz kandungan melebihi saiz div, tanpa mengembang ke luar dan meliputi elemen lain.

2. Tetapan asas bar skrol

Seterusnya, kami boleh menyesuaikan lagi gaya bar skrol dengan cara berikut:

/* 滚动条整体样式 */
.wrapper::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #f5f5f5;
}

/* 滚动条thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb {
    width: 5px;
    height: 10px;
    background-color: #9a9a9a;
}

/* 滚动条hover状态下thumb(滑块)样式 */
.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* 滚动条上下箭头样式 */
.wrapper::-webkit-scrollbar-button {
    background-color: #ccc;
    display: none;
}

/* 滚动条左右箭头样式 */
.wrapper::-webkit-scrollbar-button:start:decrement, .wrapper::-webkit-scrollbar-add-button {
    display: none;
}

.wrapper::-webkit-scrollbar-button:end:increment, .wrapper::-webkit-scrollbar-sub-button {
    display: none;
}

Analisis kod:

1. ::-webkit-scrollbar : Pilih semua widget bar skrol. Gaya ini boleh menetapkan lebar keseluruhan, ketinggian dan warna latar belakang bar skrol.
2. ::-webkit-scrollbar-thumb : Pilih peluncur. Gaya ini boleh mengawal lebar, ketinggian dan warna latar belakang peluncur.
3. ::-webkit-scrollbar-thumb:hover: Pilih gaya peluncur dalam keadaan tuding.
4. ::-webkit-scrollbar-button: Pilih bahagian anak panah di kedua-dua hujung bar skrol. Gaya ini digunakan untuk mengawal warna latar belakang dan sama ada untuk memaparkan anak panah atas, bawah, kiri dan kanan.
5. ::-webkit-scrollbar-button:start:decrement atau ::-webkit-scrollbar-sub-button: Pilih anak panah (tatal ke atas)/anak panah kiri (tatal ke kiri) bahagian bar skrol, digunakan apabila bar skrol menegak/mendatar.
6. ::-webkit-scrollbar-button:end:increment atau ::-webkit-scrollbar-add-button: Pilih anak panah ke bawah (tatal ke bawah)/anak panah kanan (tatal ke kanan) bahagian bar skrol, digunakan apabila bar skrol menegak/mendatar.

3. Bar skrol tersuai

Kami boleh menyesuaikan gaya bar skrol mengikut keperluan kami Berikut ialah contoh gaya tersuai:

.wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #f5f5f5;
}

.wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #a0a0a0;
}

.wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.wrapper::-webkit-scrollbar-corner {
    background-color: #f5f5f5;
}

Analisis kod:

1. ::-webkit-scrollbar-track: Pilih bahagian trek bar skrol, iaitu kawasan antara peluncur dan kawasan anak panah/skrol Anda boleh menetapkan gaya trek. seperti warna latar belakang, sempadan, Sudut bulat, dll. Dalam contoh ini kita mempunyai sudut bulat.
2. ::-webkit-scrollbar-thumb: Pilih gaya peluncur Dalam contoh ini, kami menetapkan sudut bulat dan menetapkan warna latar belakang peluncur dan warna latar belakang dalam keadaan tuding.
3. ::-webkit-scrollbar-corner: Tetapkan warna sudut bar skrol Biasanya kita tetapkan pada warna yang sama dengan bekas.

4 Ringkasan

Selepas menetapkan bar skrol di atas, kita boleh memilih gaya yang sepadan untuk ditetapkan mengikut keperluan sebenar, supaya kita boleh mengalami laman web dan aplikasi mudah alih yang interaktif. pengalaman. Pada masa yang sama, perlu diingatkan bahawa contoh di atas digunakan terutamanya untuk beberapa pelayar berasaskan Webkit seperti Chrome dan Safari Jika anda ingin menyesuaikan diri dengan pelayar lain, anda perlu menggunakan gaya dan atribut yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan bar skrol div dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!