JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<nav class="timeline__nav">
      <ul class="timeline__list">
        <li class="active"><span>2010</span></li>
        <li><span>2011</span></li>
        <li><span>2012</span></li>
        <li><span>2013</span></li>
        <li><span>2014</span></li>
        <li><span>2015</span></li>
        <li><span>2016</span></li>
        <li><span>2017</span></li>
        <li><span>2018</span></li>
        <li><span>2019</span></li>
        <li><span>2020</span></li>
      </ul>
    </nav>
    
    <div class="cv">

    <article class="timeline">
    <section class="timeline__section">
      <div class="wrapper"
      >
        <div data-line='1' class="look">
        <h2 class="milestone">2010</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='2' class="look">
        <h2 class="milestone">2011</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение...

CSS

.cv {
  display: flex;
  justify-content: space-between;
  width: 768px;
  height: 400px;
  overflow: auto;
  border: 5px solid turquoise;
}
.timeline__nav {
  position: fixed;
  top: 100px;
  left: -20px;
}

.timeline__nav ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.active {
  color: tomato;
}
.timeline__section {
  padding-left: 60px;
}
.timeline__section {
  overflow-y: scroll;
}

.milestone {
  margin-top: 60px;
}

.scroll__data {
  width: 100%;
  flex-grow: 1;
}

JavaScript

document.querySelector('.cv').addEventListener('scroll', (evt) => {
	let inx = 0;
  let sumHeight = 0;
  let scrollTop = evt.target.scrollTop;
  document.querySelectorAll('.cv .look').forEach(e=>{
  	sumHeight+= e.offsetHeight + 60;
    if(sumHeight >= scrollTop){
    	document.querySelector(".timeline__list li.active").classList.remove("active");
      document.querySelector(`.timeline__list li:nth-child(${inx+1})`).classList.add("active");
        return false;
    }
    inx++;
  })
})