Bagaimana Memaksa Bar Skrol Menegak Sentiasa Muncul dalam CSS?

Cara Sentiasa Memaparkan Bar Skrol Menegak dalam CSS

Dalam senario tertentu, anda mungkin mahu memastikan bar skrol menegak sentiasa kelihatan , walaupun apabila kandungan div tidak melangkaui kawasan yang boleh dilihat. Secara lalai, penyemak imbas menyembunyikan bar skrol sehingga tetikus melayang di atas elemen.

Untuk memaksa bar skrol sentiasa dipaparkan, tambahkan CSS berikut:

:::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Barisan pertama mengalih keluar penggayaan penyemak imbas lalai dan baris kedua mentakrifkan penggayaan tersuai untuk ibu jari bar skrol.

Untuk contoh:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
  
  ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
  }
  
  ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
  }
}

Atas ialah kandungan terperinci Bagaimana Memaksa Bar Skrol Menegak Sentiasa Muncul dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!