0

I want to create a dictionary-like feature where I want to design a custom scroll bar. I can customize it using CSS but it is up to some extent. I can't achieve what I want. Any help is appreciated.

This is what I want

enter image description here

This is what I can able to customize (ignore color)

enter image description here

.scrolling-area::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 12px #fff;
    border-radius: 0px;
    background-color: transparent;
    border-left: 4px solid $primary;
    border-right: 4px solid $primary;
  }
  .scrolling-area::-webkit-scrollbar-thumb {
    border-radius: 20px;
    -webkit-box-shadow: inset 0 0 px #fff;
    background-color: #fff;
  }

Note: I saw one jquery plugin offer this type of scrollbar But I want to do it using vanilla js or vuejs specific solution also appreciated.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Rashidtvmr
  • 108
  • 8
  • 2
    Does this answer your question? [CSS Scroll thumb fixed circle size](https://stackoverflow.com/questions/41598048/css-scroll-thumb-fixed-circle-size) – Andam Oct 03 '22 at 07:59
  • Nope, image shows expected result but given code prints something different. – Rashidtvmr Jul 21 '23 at 06:25

0 Answers0