<div class="flex">
    <t id="scroll" class="scroll"></t>
</div>
<div class="scrollText">
    <t>Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll<br>
    Scroll</t>
</div>

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

:root{
    background: black;
    font-family: Comfortaa;
}
.flex{
    position: fixed;
    display: flex;
    align-items: center;
    top: 0px;
    right: 0px;
    height: 100vh;
}
.scroll{
    color: white;
    font-size: 20px;
    text-align: center;
    vertical-align: center;
}
.scrollText{
    color: white;
    font-size: 100px;
    margin: 120px;
 }

// scroll-bar
var scrollBar = document.getElementById('scroll'),
    scrolled = 0,
    docHeight = 0,
    windowHeight = 0,
    scrollPer = 0,
    numOfItems = 0,
    scrollPos = 0;

window.onscroll = function(){ render() };
window.onresize = function(){ render() };

function render(){
    scrolled = window.pageYOffset,
    docHeight = Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight,
    document.body.scrollHeight, document.body.offsetHeight),
    windowHeight = window.innerHeight,
    scrollPer = scrolled / (docHeight - windowHeight),
    scrollBar.innerHTML = '',
    numOfItems = Math.round(windowHeight / 26.2),
    scrollPos = scrollPer * numOfItems;
    
    for(let i = 0; i <= numOfItems; i++) {
        if(i > scrollPos - 2 & i < scrollPos + 2){
            scrollBar.innerHTML = scrollBar.innerHTML + '#<br>';
        }else{
            scrollBar.innerHTML = scrollBar.innerHTML + '-<br>';
        }
    }
    return;
}
render();
 
// preview
window.onmousemove = function(){ clearInterval(previewInterval); };
function preview(){
    if(scrollPer == 1){
        clearInterval(previewInterval);
    }
    window.scrollTo({ top: scrolled + 20, behavior: 'smooth' })
}
var previewInterval = setInterval(preview, 100);