JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style="overflow-x:scroll; max-width:1000px;">
  <div id="contained" style="width:3000px;">r</div>
</div>
<div id="log">0%</div>

CSS

#container {
    border: 1px solid black;
}

JavaScript

$('#container').scroll(function(){
    var $this = $(this),
        scrollPercentage = 100 * $this.scrollLeft() / ($('#contained').width()-$this.width());
    $('#log').html(scrollPercentage.toFixed(2)+'%');
});