JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner"></div>
</div>

CSS

#outer {
    width: 200px;
    height: 215px;
    overflow-x: scroll;
    direction: rtl;
    position: relative;
    background: red;
}

#inner {
    width: 500px;
    height: 200px;
    position: absolute;
    right: 0;
    background: blue;
}

JavaScript

$('body').append($('#outer').scrollLeft());

$('#outer').scrollLeft(-100);

$('body').append('<br />' + $('#outer').scrollLeft());

$('#outer').scrollLeft(100);

$('body').append('<br />' + $('#outer').scrollLeft());