JSFiddle - React, Tailwind, and code Playground

by Kye Sooryun

HTML

<div class="scroll-wrap">
  <ul class="menu-area">
    <li><a>메뉴1</a></li>
    <li><a>메뉴2</a></li>
    <li><a>메뉴3</a></li>
    <li><a>메뉴4</a></li>
    <li><a>메뉴5</a></li>
    <li><a>메뉴6</a></li>
    <li class="on"><a>메뉴7</a></li>
  </ul>
</div>

CSS

div, ul {margin:0;padding:0;}
.scroll-wrap {overflow-x:scroll;width:320px;}
ul {display:table;width:100%;}
li {display:table-cell;white-space:nowrap;list-style:none;}
li a {display:block;margin-left:10px;border:1px solid #000;}
li.on a {background:pink;}
li:first-child a {margin-left:0;}

JavaScript

$(document).ready(function (){
	$('.menu-area').each(function (){
  	var _width = $(this).width(),
    		_length = $(this).length,
        _index = $(this).find('.on').index();
                
    $('.scroll-wrap').scrollLeft((_width/_length) * _index);
  });
});