大家晚上好。 我需要實現如圖所示的滾動條。

我沒有找到任何CSS或JS腳本來實現這一點。有人面臨同樣的要求嗎？

謝謝

編輯:找了很久，找到了這個解決方案?？雌饋聿诲e，做了一些CSS調整。https://manos . Mali Hu . gr/repository/custom-scroll bar/demo/examples/complete _ examples . html

在你嘗試漸變之前，不要說在CSS中有些事情是不可能的

// pure css, no js ;)

.scrolly{
  height: 100vh;
  line-height: 30px;
  overflow-y: scroll;

}

.scrolly::-webkit-scrollbar-thumb {
    background: radial-gradient(circle farthest-corner, yellow 0%, yellow 50%, transparent 50%, transparent 100%) no-repeat;
    background-size: auto 30px;
    background-position: center;
}

.scrolly::-webkit-scrollbar {
  width: 30px;
}

.scrolly::-webkit-scrollbar-track {
  background: linear-gradient(to right, transparent 0, transparent 45%, #222 45%, #222 55%, transparent 55%, transparent 100%);
}

<div class="scrolly">
      The cat (Felis catus) is a domestic species of small carnivorous mammal. <br>
    It is the only domesticated species in the family Felidae and is commonly referred to as the domestic cat or house cat to distinguish it from the wild members of the family. <br>
    Cats are commonly kept as house pets but can also be farm cats or feral cats; the feral cat ranges freely and avoids human contact. <br>
    Domestic cats are valued by humans for companionship and their ability to kill small rodents. <br>
    About 60 cat breeds are recognized by various cat registries. <br>
    <br>
    <br>
    The cat is similar in anatomy to the other felid species: it has a strong flexible body, quick reflexes, sharp teeth, and retractable claws adapted to killing small prey like mice and rats. <br>
    Its night vision and sense of smell are well developed. <br>
    Cat communication includes vocalizations like meowing, purring, trilling, hissing, growling, and grunting as well as cat-specific body language. <br>
    Although the cat is a social species, it is a solitary hunter. <br>
    As a predator, it is crepuscular, i.e. <br>
    most active at dawn and dusk. <br>
    It can hear sounds too faint or too high in frequency for human ears, such as those made by mice and other small mammals. <br>
    It also secretes and perceives pheromones. <br>
    <br>
  from Wikipedia
</div>

你找不到這樣的純css例子的原因是拇指的大小通常和脊柱的總寬度一樣大。使用純css，你可以隱藏背景，只留下拇指，但是這樣會消除黑條(如圖所示)。你可以看看這個項目:Angular 2.0 CLI項目中div元素上的自定義滾動條？