Question 182605 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Custom scrollbar with circular thumb on a thin track

Good evening everybody.
I need to realize a scrollbar like the one shown in the picture.

Scrollbar sample

I did not find any CSS or JS script to make that happens. Anybody faced this same request?

Thanks

EDIT: After a long search, I found this solution. It looks fine, with some CSS adjustments. https://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

Tags:

2

Answers


  1. 0

    The reason you cannot find such pure css examples is that the thumb size is usually just as large as the overall width of the scollbar. With pure css you can try to hide the background and leave only the thumb, but this would eliminate the black bar(shown on the picture). You may take a look at this project: custom Scroll-Bar on a div element in Angular 2.0 CLI project?

    Login or Signup to reply.
  2. 0

    don’t say something is not possible in CSS before you try gradients

    // 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, #fff 0, #fff 45%, #222 45%, #222 55%, #fff 55%, #fff 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search