Recently, I created a custom scrollbar but faced an issue with its width. Whenever I zoom in or out (Ctrl + mousewheel), the width (set to 10px) changes due to being in pixels. When switched to width: 1vw, it works well with zooming but gets affected by window resizing once again.
Even when attempting to use width: 1vh, the size of the scrollbar alters upon vertical window resizing.
What is the best approach to ensure that the scrollbar's size remains fixed and independent of zooming or window resizing?
CSS Code
#scroll-bar {
position: fixed;
width: 1vh;
height: 100%;
top: 0;
right: 0;
background: black;
}
Javascript Code
<script>
let bar = document.getElementById('scroll-bar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function () {
let bar_height = (window.pageYOffset/totalHeight)*100;
bar.style.height = bar_height+'%';
}
</script>