JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box0">
    
                <div id="box1"></div>
</div>

<button id="getScroll">Get Left Scroll</button>
<button id="setScroll">Set Left Scroll to 20</button>
<div id="scroll"></div>

CSS

#box0 {
    width:200px;
    height:100px; 
    border:1px solid black;
}


#box1 {
    width:1000px;
    height:100px;
    background-color:beige;
}
#getScroll {
    position:relative;
    left:300px;
}

#setScroll {
    position:relative;
    left:300px;
}
#scroll {
    width:100px;
    height:20px;
    border: 1px solid black;
    margin-left:300px;
}

JavaScript

$(function() {
    $('#getScroll').click(function() {
        
		var window_scroll = $(window).scrollLeft();
        $('#scroll').html("left scroll is " + window_scroll);
 
    });
    
    $('#setScroll').click(function() {
        $(window).scrollLeft(20);
        var window_scroll = $(window).scrollLeft();
        $('#scroll').html("left scroll is " + window_scroll);
    });
    
    
    
});