Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol menggunakan CSS dan 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>

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>

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!