JSFiddle - React, Tailwind, and code Playground

by peretc001

HTML

<div class="user_list">
  <div class="row">
    <div class="col">
      <a href="#">Компания</a> 
      </div>
  </div>
</div>
<div class="region_list">
		<div class="row">
			<ul>
				<li><a href="/peretc001/chpv0gre/?col-1">1</a></li>
				<li><a href="/peretc001/chpv0gre/?col-2">2</a></li>
        <li><a href="/peretc001/chpv0gre/?col-3">3</a></li>
        <li><a href="/peretc001/chpv0gre/?col-4">4</a></li>
        <li><a href="/peretc001/chpv0gre/?col-5">5</a></li>
        <li><a href="/peretc001/chpv0gre/?col-6">6</a></li>
        <li><a href="/peretc001/chpv0gre/?col-7">7</a></li>
        <li><a href="/peretc001/chpv0gre/?col-8">8</a></li>
        <li><a href="/peretc001/chpv0gre/?col-9">9</a></li>
        <li><a href="/peretc001/chpv0gre/?col-10">10</a></li>
        <li><a href="/peretc001/chpv0gre/?col-11">11</a></li>
        <li><a href="/peretc001/chpv0gre/?col-12">12</a></li>
        <li><a href="/peretc001/chpv0gre/?col-13">13</a></li>
        <li><a href="/peretc001/chpv0gre/?col-14">14</a></li>
        <li><a href="/peretc001/chpv0gre/?col-15">15</a></li>
        <li><a href="/peretc001/chpv0gre/?col-16">16</a></li>
        <li><a href="/peretc001/chpv0gre/?col-17">17</a></li>
        <li><a href="/peretc001/chpv0gre/?col-18">18</a></li>
        <li><a href="/peretc001/chpv0gre/?col-19">19</a></li>
        <li><a href="/peretc001/chpv0gre/?col-20">20</a></li>
			</ul>
      <div id="log">0</div>
		</div>	
	</div>

CSS

.user_list {width:100%;}
	.region_list .row {width:90%;margin:0 auto;}

.region_list {width:100%;background:#f2f2f2;border:0.5px solid #ccc;position:fixed;bottom:0;}
	.region_list .row {width:90%;margin:0 auto;}
	.region_list .row ul {width:100%;overflow:auto;margin:0;padding:0;white-space:nowrap;}
	.region_list .row ul li {display:inline;padding:0;margin:0;border-colapse:collapse;}
	.region_list .row ul li a {display:inline-block;padding:0.5rem 1rem;margin:0;border-right:0.5px solid #ccc;color:#222;text-decoration:none;}
	.region_list .row ul li a:hover {background:#ccc;color:#222;text-decoration:none;}
	.region_list .row ul li a.active {font-weight:bold;background:#ccc;}

JavaScript

$('.region_list ul').scroll(function(){
    var scrollPercentage=100*this.scrollLeft/this.scrollWidth/(1-this.clientWidth/this.scrollWidth);
    $('#log').html(scrollPercentage.toFixed(0));
});