Cara menggunakan CSS hanya pada bar skrol mendatar

Question

Saya pelatih baharu dan mereka memberi saya tugasan mudah: peribadikan bar skrol mendatar

Saya mempunyai kod ini tetapi bar skrol menegak hilang...saya memerlukannya untuk lalai dalam arah menegak...hanya bar skrol mendatar perlu diperibadikan.

::-webkit-scrollbar {
    width: 7px;
  }
::-webkit-scrollbar-thumb:horizontal {
   border-radius: 8px;
   background-color: rgba(92, 92, 92, 0.5);
  }

Jika saya meletakkan kod di bawah di tengah, bar skrol menegak juga diperibadikan...jadi saya hanya boleh memperibadikannya atau menyembunyikannya sama sekali...dan saya tidak boleh melakukannya

::-webkit-scrollbar-thumb {                             
-webkit-appearance: none;
}

Answer 1

Berikut ialah contoh cara menggayakan bar skrol mendatar sahaja:

https://codepen.io/lmmm/pen/abKeEJw

Anda boleh menggunakan elemen yang anda ingin gayakan dan menggunakan peraturan anda mengikut keperluan:

    horizontal text that overflows

#horizontal::-webkit-scrollbar {
  width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
  border-radius: 15px;
  background-color: tomato;
}

Answer 2

Anda perlu memautkan penghias pseudo dengan div untuk menggunakan gaya. Ini bermakna ibu jari menegak berasal dari badan atau teg HTML. Ibu jari mendatar adalah untuk div dalam.

#bars-chart-container::-webkit-scrollbar {
  width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
}

Ini mungkin tidak menghalang ibu jari menegak div dalam daripada hilang, tetapi setakat ini saya nampak dalam imej anda bahawa anda tidak perlu menunjukkannya. Saya tidak fikir ini boleh dicapai dengan cara lain.