JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outerWrapper">
    <div id="innerWrapper">
        <div id="content">
            Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
            sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet
            risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat
            Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris
            tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae
            sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
            vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus
            pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et...

CSS

#outerWrapper {
    height: 400px;
    overflow: hidden;
    display: flex;
}

#content {
    background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
    width: 400px;
}

#scrollbar {
    height: 100%;
    width: 50px;
    background-color: orange;
}

#scrollbar_thumb {
    background-color: yellow;
    border: 2px solid blue;
    position: relative;
}

JavaScript

console.clear();

var innerWrapper = document.getElementById('innerWrapper');
var scrollBar = document.getElementById('scrollbar');
var scrollBarThumb = scrollBar.firstElementChild

scrollBarThumb.style.height = (innerWrapper.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px';

innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.addEventListener('DOMMouseScroll', handleScroll);

innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';

function handleScroll(e) {
    // Prevent parents from scrolling
    e.preventDefault();
    var direction = (e.detail < 0 || e.wheelDelta > 0) ? 1 : -1; // 1 = scroll down, -1 = scroll

    var start = parseInt(innerWrapper.style.transform.split(',')[1], 10);
    var scrollPosition = start + direction * 100; // Cannot use `deltaY`, because not all browsers support it.
    var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
    scrollPosition = clamp(scrollPosition, -scrolledToBottom, 0);

    innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
    scrollBarThumb.style.top = -(scrollPosition * scrollBarThumb.offsetHeight / innerWrapper.parentElement.offsetHeight) + 'px'
}

function clamp(val, min, max) {
    if (typeof min !== 'number') min = 0;
    if (typeof max !== 'number') max = 1;
    return Math.min(Math.max(val, min), max);
}