Скролл на 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>
