<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>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='3' class="look">
        <h2 class="milestone">2012</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='4' class="look">
        <h2 class="milestone">2013</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='5' class="look">
        <h2 class="milestone">2014</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='6' class="look">
        <h2 class="milestone">2015</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='7' class="look">
        <h2 class="milestone">2016</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='8' class="look">
        <h2 class="milestone">2017</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
        <div data-line='9' class="look">
        <h2 class="milestone">2018</h2>
        <p>По сути, стратегия позиционирования определяет рекламный макет. Маркетинговая активность отражает медиаплан, не считаясь с затратами. Общество потребления переворачивает ролевой поведенческий таргетинг.</p>
        <p>Рекламный блок, суммируя приведенные примеры, развивает межличностный отраслевой стандарт. Надо сказать, что бюджет на размещение изменяет из ряда вон выходящий креатив, отвоевывая рыночный сегмент. Баланс спроса и предложения интегрирована.</p>
        <p>Дело в том, что креатив ускоряет бренд. Бренд, на первый взгляд, многопланово создает имидж. Узнавание бренда, конечно, разнородно отталкивает институциональный клиентский спрос. Стимулирование сбыта, не меняя концепции, изложенной выше, спорадически уравновешивает фирменный рейтинг, повышая конкуренцию. Концепция новой стратегии оправдывает BTL.</p>
        </div>
      </div>
    </section>
  </article>
  </div>

.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;
}

let scrollObject = document.querySelector('.cv')
let section = scrollObject.querySelector('.timeline__section');
let milestones = section.querySelectorAll('.milestone')
let list = document.querySelector('.timeline__list')
let items = list.querySelectorAll('li')

let look = scrollObject.querySelectorAll('.look')

function addActiveClass(i) {
  items[i].classList.remove('active');
  items[i + 1].classList.add('active');
  return i++;
}

function removeActiveClass(i) {
  items[i].classList.add('active');
  items[i + 1].classList.remove('active');
  return i--;
}

function round(val) {
  return Math.round(val / 10) * 10;
}


let isScrolled = false;

scrollObject.addEventListener('scroll', (evt) => {
  let coord = round(-section.getBoundingClientRect().y);
  let i = 0;
  
  if (coord > 350) {
    addActiveClass(i)
    i++
  } else if (coord < 350) {
    removeActiveClass(i)
    i--
  } 
  if (coord > 750) {
    addActiveClass(i)
    i++
  } else if (coord < 750) {
    removeActiveClass(i)
    i--
  }
})

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.y >= 0 || rect.bottom <= scrollObject.innerHeight
    );
}