Bagaimanakah saya boleh menyesuaikan ketinggian bar skrol dalam CSS?

Menyesuaikan Ketinggian Bar Tatal

Untuk mengubah suai ketinggian bar skrol, adalah penting untuk memahami komposisi struktur bar skrol. Bar skrol terdiri daripada beberapa elemen, termasuk:

• Inci Jari Bar Skrol: Mewakili kawasan boleh seret yang pengguna manipulasi untuk menatal.
• Trek Bar Skrol: Kawasan latar belakang di mana ibu jari bergerak.

Untuk mencapai kesan yang diingini yang ditunjukkan dalam imej yang disediakan, adalah perlu untuk:

1. Mentakrifkan titik permulaan dan penamat untuk ibu jari bar skrol, memastikan ia hanya menatal dalam kawasan tertentu.
2. Buat trek tatal pengganti, menggantikan trek lalai.

Berikut ialah coretan kod contoh yang menunjukkan cara untuk mencapai ini:

<code class="css">.wrapper {
  overflow-y: scroll;
  width: 100%;
  height: 100%;

  /* Create a fake scroll track */
  &::after {
    content: '';
    position: absolute;
    width: 5px;
    height: calc(100% - 20px);
    z-index: -1;
    top: 10px;
    background: #666;
    right: -1px;
  }

  /* Customize the scrollbar properties */
  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: red;
    border: none;
    border-radius: 5px;
  }

  /* Define the end and start points of the scrollbar thumb */
  &::-webkit-scrollbar-track-piece:end {
    margin-bottom: 10px;
  }

  &::-webkit-scrollbar-track-piece:start {
    margin-top: 10px;
  }
}</code>

Coretan kod ini mencipta bar skrol tersuai dengan ketinggian 50%, seperti yang dinyatakan dalam imej yang disediakan. Ia berbuat demikian dengan melaraskan saiz ibu jari bar skrol dan mencipta trek skrol palsu untuk menggantikan yang asal.

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