JSFiddle - React, Tailwind, and code Playground

HTML

<div style="overflow: scroll; width: 500px;" id="a">
    <div style="margin: 0pt 1000px;">
        <div style="padding: 0pt;" class="innerDiv">a</div>
    </div>
</div>
<div style="overflow: scroll; direction: rtl; width: 500px;" id="b">
    <div style="margin: 0pt 1000px;">
        <div style="padding: 0pt;" class="innerDiv">b</div>
    </div>
</div>
<div style="overflow: scroll; direction: rtl; width: 500px;" id="c">
    <div style="margin: 0pt 100%; display: -moz-box;">
        <div style="padding: 0pt;" class="innerDiv">c</div>
    </div>
</div>
<button onclick="console.log('A: ' + $('#a').scrollLeft() + ' B: ' + $('#b').scrollLeft() + ' C: ' + $('#c').scrollLeft());">Move scrollbars and click this button</button><br>

JavaScript

// Refresh with firebug console open in firefox
// Test html copied from https://bug383026.bugzilla.mozilla.org/attachment.cgi?id=267484
console.log($('#a').scrollLeft());
console.log($('#b').scrollLeft());
console.log($('#c').scrollLeft());