JSFiddle - React, Tailwind, and code Playground

by blineberry

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

var container = $('<div />').css({
    'width': '200px', 
    'height': '1px',
    'overflow-x': 'scroll',
    'direction': 'rtl',
    'position': 'fixed',
    'top': '-10px'
    
});
                                  
var child = $('<div />').css({
	'width': '500px',
    'height': '1px',
    'position': 'absolute',
    'right': '0'
});



$(container).append(child).appendTo('body');

console.log($(container));


$('body').append($(container).scrollLeft());

$(container).scrollLeft(-100);

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

$(container).scrollLeft(100);

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