Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol dalam CSS untuk mencipta halaman web yang menarik dan berfungsi secara visual?

Menyesuaikan Ketinggian Bar Tatal

Mengawal ketinggian bar skrol ialah teknik yang berguna untuk meningkatkan daya tarikan visual dan kefungsian halaman web. Artikel ini meneroka kaedah untuk menyesuaikan ketinggian bar skrol agar menyerupai contoh yang disediakan dalam imej.

Memahami Struktur Bar skrol

Pertama, adalah penting untuk memahami struktur bar skrol . Ia terdiri daripada beberapa elemen:

1. Bar skrol: Bekas utama bar skrol.
2. Butang Bar skrol: Anak panah di bahagian atas dan bawah.
3. Runut bar skrol: Ruang menegak atau mendatar di mana ibu jari bar skrol bergerak.
4. Kepingan trek bar skrol: Segmen bar skrol trek.
5. Ibu jari bar skrol: Elemen alih yang menunjukkan kedudukan dalam kandungan.
6. Sudut bar skrol: Persilangan bar skrol dan bar skrol trek.
7. Resizer: Elemen pilihan yang membenarkan bar skrol diubah saiznya.

Melaraskan Tinggi Bar Skrol

Untuk mencapai ketinggian bar skrol yang diingini, anda mesti:

1. Tetapkan titik permulaan dan penamat ibu jari bar skrol. Ini menentukan tempat ibu jari bermula dan berhenti menatal.
2. Simulasikan trek tatal. Lagu tatal memberikan ilusi trek berterusan walaupun trek sebenar dipecahkan kepada dua bahagian.

Pelaksanaan Kod

Coretan kod berikut menunjukkan cara melaksanakan pelarasan ini:

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

Kod ini mencipta bar skrol yang mempunyai ketinggian 5px dan kelihatan mempunyai trek berterusan. Runut simulasi dibuat menggunakan elemen pseudo ::selepas, manakala lebar dan latar belakang trek dilaraskan menggunakan sifat CSS.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol dalam CSS untuk mencipta halaman web yang menarik dan berfungsi secara visual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!