0.0.18 • Published 2 years ago
@xlibz/scrollbar v0.0.18
scrollbar
A library for creating a custom scrollbar
Usage Example
<body>
<x-scrollbar>
<scrollbar-knob>
</x-scrollbar>
<div class="content"></div>
</body>html,
body {
width: 100%;
height: 100%;
}
body {
margin: 0;
overflow: hidden auto;
}
body {
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
x-scrollbar {
position: fixed;
top: 0;
right: 0;
width: 1vmin;
height: 100%;
background-color: #ebebeb;
}
scrollbar-knob {
background-color: black;
}
.content {
height: 500vh;
width: 100%;
}Recipes
if the width of the scrollbar is greater than the height, the knob will move horizontally.
You can create a scrollbar for any element that has overflow, but the
position: fixedused in the above example may not be suitable for all cases. If things don't work as expected, try different options for theposition.