Горизонтальный скролл элементов списка при наведении на края вьюпорта

уже неделю бьюсь над проблемой, надеюсь на помощь более опытных людей.

Есть список табов (сами они работают коректно) однако в мобильной версии дизайна они распологаются так, что горизонтально не видны все пункты. Часть выходит за границу вьпорта. Нужно сделать так, чтобы при наведении на края вьюпорта список проскроливался дальше, показывая скрытые пункты меню. Нашла большое количество вариантов на jQuery, однако не могу ничего найти на чистом JS. Проблема в том, что в моем ТЗ указано не использовать никакие библиотеки.

Разметка:

<ul class="programs__programs-name programs-name">
          <li class="programs-name__item">
            <a class="programs-name__link programs-name__link--star"  href="#general">Общие</a>
          </li>
          <li class="programs-name__item programs-name__item--active">
            <a class="programs-name__link programs-name__link--cap" href="#academic">Академические</a>
          </li>
          <li class="programs-name__item">
            <a class="programs-name__link programs-name__link--internship" href="#internships">Стажировки</a>
          </li>
          <li class="programs-name__item">
            <a class="programs-name__link programs-name__link--volunteer" href="#volunteer">Волонтерство</a>
          </li>
          <li class="programs-name__item">
            <a class="programs-name__link programs-name__link--religion" href="#religion">Религиозные</a>
          </li>
        </ul>

Стили:

.programs-name {
  @include list-style (none, 0, 0);

  @media (max-width: $breakpoint-mobile) {
    position: relative;
    display: flex;
    max-width: 320px;
    overflow-x: hidden;
  }
}

.programs-name__item {
  width: 288px;
  display: flex;
  align-items: center;

  @media (max-width: $breakpoint-mobile) {
    width: 181px;
    margin-bottom: 32px;
  }
}

Вот что я пока сделала на JS. табы прокручиваются в конец, но там 5 пунктов, и получается, что виды только 2 первых или 2 последних.. плавного передвижения от пункта к пункту я добиться не могу. Пробовала смещать на ширину одного пункта, но тогда он смещается только на 1,5 ширины и застревает

 var listProgram = document.querySelector('.programs-name');
  var itemProgram = document.querySelectorAll('.programs-name__item');

  itemProgram.forEach(function (item) {
    item.addEventListener('mouseover', function () {
      listProgram.scrollLeft = listProgram.scrollWidth;
    });
  });

Прикладываю, как это выглядит визуально, возможно будет лучше понятно. Буду очень благодарна за помощь.