JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="wrap">
	<div class="area">
		<div class="list scrollBox">
			<ul>
				<li><a href="#none">1</a></li>
				<li><a href="#none">2</a></li>
				<li><a href="#none">3</a></li>
				<li><a href="#none">4</a></li>
				<li><a href="#none">5</a></li>
				<li><a href="#none">6</a></li>
				<li><a href="#none">7</a></li>
				<li><a href="#none">8</a></li>
				<li><a href="#none">9</a></li>
				<li><a href="#none">10</a></li>
				<li><a href="#none">11</a></li>
				<li><a href="#none">12</a></li>
				<li><a href="#none">13</a></li>
				<li><a href="#none">14</a></li>
				<li><a href="#none">15</a></li>
				<li><a href="#none">16</a></li>
				<li><a href="#none">17</a></li>
				<li><a href="#none">18</a></li>
				<li><a href="#none">19</a></li>
				<li><a href="#none">20</a></li>
			</ul>
		</div>
		<div class="content scrollBox">
			<h3 id="name1">1</h3>
			<ul>
				<li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li>
			</ul>
			<h3 id="name2">2</h3>
			<ul>
				<li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a href="#none">1</a></li><li><a...

CSS

*{margin:0;padding:0;list-style:none;}
html,body{height:100%;font-size:14px/1.5}
.wrap{height:100%;}
.area{position:relative;width:100%;height:100%;overflow:hidden;}
.area .list{float:left;width:79px;border-right:1px solid #000;height:100%;}
.area .list ul li a{display:block;text-align:center;border-bottom:1px solid #999;line-height:49px;}
.area .content{margin-left:80px;height:100%;}
.area .content h3{padding:0 0 0 10px;line-height:49px;}
.area .content ul li a{display:block;padding:5px 0 5px 10px;}
.area .scrollBox{overflow-y:scroll;}

JavaScript

listSetup();

	var $content = $('.content'),
		$listBox = $('.list'),
		$list = $('.list > ul > li > a'),
		cont_index = 0,
		move = 0,
		speed = 250,
		time = speed + 50;

	function listSetup(){
		$contPos = [];
		$listPos = [];
		$('.content > h3').each(function(){
			$contPos.push($(this).offset().top);
		});		
		$('.list > ul > li').each(function(){
			$listPos.push($(this).offset().top);
		});
	}

	function listMove(){
		$listBox.stop().animate({scrollTop:$listPos[cont_index]}, speed);
	}

	$content.on('scroll', function(e){	
		$contScroll = $(this).scrollTop();
		if(move == 0){
			if($contScroll >= $contPos[cont_index+1]){
				cont_index++;
				listMove();
			}else if($contScroll < $contPos[cont_index]){
				cont_index--;
				listMove();
			}	
      console.log(cont_index);
		} else {
			setTimeout(function(){move = 0 }, time);
		}
	});

	$list.on('click', function(){
		move = 1;
		$list_index = $(this).parent('li').index();
		$listBox.stop().animate({scrollTop:$listPos[$list_index]}, speed);
		$content.stop().animate({scrollTop:$contPos[$list_index]}, speed);
	});