Скролл на js\css

Как получить такой скролл? Где выпуклость там находится курсор на скролле.


Ответы (1 шт):

Автор решения: UserTest013

Если надо просто что-то готовое, то можно воспользоваться scrollbot https://github.com/akzhy/scrollbot

const scroll = new Scrollbot(".scroll", 16).setStyle({
  height: "60px",
  left: "-10px",
  "background": 'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 10" preserveAspectRatio="none"><path d="M 3,0 C 3,3 0,3 0,5 0,7 3,7 3,10 Z" fill="000"/></svg>\') 0 0 / 100% 100% no-repeat',
  "border-radius": "unset",
}, {
  background: "transparent",
});

scroll

const psuedo = document.createElement("div");
psuedo.classList.add("psuedo");
scroll.scrollBarHolder.appendChild(psuedo);
.scroll {
  width: 200px;
  height: 300px;
}

.psuedo {
  height: 100%;
  width: 10px;
  left: 6px;
  background: #000;
  position: absolute;
}
<script src="https://rawcdn.githack.com/akzhy/scrollbot/e0afe1fbb5b1f6b849326337a8a5f349d34fa622/js/scrollbot.min.js" type="text/javascript"></script>

<div class="scroll">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue diam, scelerisque sed faucibus at, aliquet sed diam. Pellentesque egestas pellentesque tortor in lacinia. Morbi quis rhoncus orci, ac faucibus tortor. Nulla facilisi. Praesent sollicitudin
    fringilla feugiat. Etiam justo erat, faucibus nec eleifend sed, ullamcorper eu nulla. Donec sed sapien hendrerit, volutpat augue eget, ullamcorper libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum
    nec congue ante. Nam quis massa sit amet arcu sollicitudin aliquet vel sed sem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue diam, scelerisque sed faucibus at, aliquet sed diam. Pellentesque egestas pellentesque tortor in lacinia. Morbi quis rhoncus orci, ac faucibus tortor. Nulla facilisi. Praesent sollicitudin
    fringilla feugiat. Etiam justo erat, faucibus nec eleifend sed, ullamcorper eu nulla. Donec sed sapien hendrerit, volutpat augue eget, ullamcorper libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum
    nec congue ante. Nam quis massa sit amet arcu sollicitudin aliquet vel sed sem.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris augue diam, scelerisque sed faucibus at, aliquet sed diam. Pellentesque egestas pellentesque tortor in lacinia. Morbi quis rhoncus orci, ac faucibus tortor. Nulla facilisi. Praesent sollicitudin
    fringilla feugiat. Etiam justo erat, faucibus nec eleifend sed, ullamcorper eu nulla. Donec sed sapien hendrerit, volutpat augue eget, ullamcorper libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum
    nec congue ante. Nam quis massa sit amet arcu sollicitudin aliquet vel sed sem.</p>
</div>

→ Ссылка