JSFiddle - React, Tailwind, and code Playground

HTML

<h1>
jQuery ScrollLeft test
</h1>
<p>Use the scrollbar to see scrollLeft value.</p>
<p>In Chrome, change the browser zoom level to see the issue with non-integer values.</p>
</div>
<div id='scrollBox'>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 22 23 24
</div>
<b>scrollLeft = </b><span id='scrollLeftValue'></span>

CSS

body {
  margin: 20px;
}
#scrollBox {
 width: 200px;
 overflow: scroll;
 white-space: pre;
}
#scrollLeftValue {
  background: #ffb;
  padding-left: 10px;
  padding-right: 10px;
}

JavaScript

function showScrollLeft()
{
	var s = $('#scrollBox').first().scrollLeft();
	$('#scrollLeftValue').text(s);
}

$( "#scrollBox" ).scroll(function() {
  showScrollLeft();
});

showScrollLeft();