Bagaimana untuk Mencipta Bar Skrol Tersuai dengan Ketinggian Dikurangkan dalam Pembangunan Web?

Cara Melaraskan Ketinggian Bar Tatal

Dalam keadaan ini, kami sedang membincangkan menyesuaikan penampilan bar skrol, khususnya dengan melaraskan ketinggiannya. Untuk mencapai matlamat ini, kita perlu memahami struktur bar skrol, yang digambarkan di bawah:

<code class="css">::-webkit-scrollbar { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }</code>

Matlamatnya adalah dua kali ganda: untuk mengubah suai tempat ibu jari bar skrol (5) bermula dan berakhir menatal, dan untuk mencipta trek tatal buatan menggantikan trek sedia ada (3). Dengan menggunakan CSS, pengubahsuaian ini boleh dilaksanakan seperti berikut:

<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 palsu yang kelihatan lebih pendek daripada bar skrol sebenar, memberikan ilusi pelarasan ketinggian. Elemen ::-webkit-scrollbar-track digunakan untuk menyembunyikan bar skrol asal, manakala ::after pseudo-element mencipta bar skrol palsu. Elemen ::-webkit-scrollbar-thumb digayakan untuk menyerupai ibu jari bar skrol yang lebih pendek. Dengan melaraskan sifat jidar atas dan jidar bawah unsur ::-webkit-scrollbar-track-piece, titik permulaan dan penamat ibu jari bar skrol boleh diubah suai.

Kod ini akan memendekkan dengan berkesan penampilan bar skrol, memberikan pengalaman visual tersuai.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Bar Skrol Tersuai dengan Ketinggian Dikurangkan dalam Pembangunan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!