Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol menggunakan CSS dan HTML?-tutorial css-php.cn

Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol menggunakan CSS dan HTML?

Susan Sarandon

Lepaskan： 2024-10-28 16:18:02

asal

940 orang telah melayarinya

How can I customize the height of a scrollbar using CSS and HTML?

Menyesuaikan Ketinggian Bar Tatal

Mengawal Saiz Bar Tatal

Untuk mengubah suai ketinggian bar skrol, anda perlu memahami strukturnya . Rujuk imej di bawah untuk menggambarkan komponen bar skrol:

[Imej struktur bar skrol]

Untuk menukar saiz, kami akan menumpukan pada dua aspek:

Mengawal di mana ibu jari bar skrol (5) bermula dan berhenti menatal
Mensimulasikan runut skrol palsu dan bukannya menggunakan yang lalai (3)

Mencipta Bar Tatal Tersuai

Pertimbangkan kod berikut:

CSS:

<code class="css">.page {
  position: relative;
  width: 100px;
  height: 200px;
}

.content {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  border: 1px solid #ddd;
}

.page::after {
  content: '';
  position: absolute;
  z-index: -1;
  height: calc(100% - 20px);
  top: 10px;
  right: -1px;
  width: 5px;
  background: #666;
}

.wrapper::-webkit-scrollbar {
  display: block;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.wrapper::-webkit-scrollbar-thumb {
  background-color: red;
  border-right: none;
  border-left: none;
}

.wrapper::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 10px;
}

.wrapper::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 10px;
}</code>

Salin selepas log masuk

HTML:

<code class="html"><div class="page">
  <div class="wrapper">
    <div class="content">
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>a<br/>
      a<br/>
      a<br/>
      a<br/>
      a<br/>
    </div>
  </div>
</div></code>

Salin selepas log masuk

Kod ini:

Mentakrifkan trek tatal palsu menggunakan elemen halaman selepas unsur pseudo.
Menyesuaikan lebar, latar belakang dan warna ibu jari bar skrol menggunakan sifat CSS yang digunakan pada bar skrol elemen pembalut.
Menambah jidar ke kepingan trek bar skrol untuk mengawal titik mula dan tamat ibu jari skrol.

Dengan melaksanakan perubahan ini, anda boleh mengubah suai ketinggian bar skrol untuk memenuhi keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol menggunakan CSS dan HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!