Как сделать смещение вправо при скроле?

как при скроле делать смещение влево вправо элементов, чтобы активный был всегда на виду

<div class="overflow-y-hidden overflow-x-auto max-w-full">
  <div id="navigation-scroll" class="flex space-x-8">
    <button id="gallery" class="tab__item" role="tab"> Галерея </button>
    <button id="text" class="tab__item" role="tab"> Описание </button>
    <button id="happy" class="tab__item" role="tab"> Делись фотографиями</button>
    <button id="reviews" class="tab__item" role="tab"> Отзывы </button>
  </div>
</div>