Прокрута блоков сайта горизонтально по кнопкам

313

10 августа 2021, 18:30

Возможно ли реализовать прокрутку блоков сайта по нажатию на кнопки, используя только ванильный JS или CSS? Возможно, вопрос не совсем корректный, так как я не совсем понимаю как это называется. Чтобы изобразить свои мысли более понятно, прибегу к очевидному примеру: при нажатии кнопки About появится один блок, при нажатии на Home пролистывается к другому. Если вопрос всё равно не совсем понятный, не требую прямого решения проблемы, но нужна хотя бы наводка, куда двигаться чтобы реализовать идею.

Answer 1

$('a[data-id]').click(function() { 
    const block_id = $(this).attr('data-id'); 
    const block = $(`.block[data-id=${block_id}]`); 
    const offsetLeft = block.offset().left; 
    $(".container").animate({scrollLeft: offsetLeft}, 1000, "swing"); 
});

.container{ 
  max-width: 100%; 
  overflow-x: auto; 
  white-space: nowrap; 
} 
 
.block{ 
  width: 75vw; 
  height: 100px; 
  display: inline-block; 
  background-color: rgba(0,0,0,0.2); 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="block" data-id="1"> 
    <h2>First slide</h2> 
    <a href="#!" data-id="3">to 3 slide</a> 
  </div> 
  <div class="block" data-id="2"> 
    <h2>Two slide</h2> 
    <a href="#!">Non slide</a> 
  </div> 
  <div class="block" data-id="3"> 
    <h2>Three slide</h2> 
    <a href="#!" data-id="1">to first slide</a> 
  </div> 
  <div class="block" data-id="4"> 
    <h2>Four slide</h2> 
    <a href="#!">Non slide</a> 
  </div> 
</div>

Answer 2

Скролл к блоку:

$("html, body").animate({scrollTop: block.offset().top});

Ну а навесить события - думаю, и так всё понятно

Answer 3

function scrollTo(desiredElement) { //передаете нужный элемент, до которого хотите прокрутить, как аргумент desiredElement
    const distance = desiredElement.getBoundingClientRect().left + window.pageXOffset; //расстояние от начала документа по оси X до нужного нам элемента
    window.srollTo(distance ,0); //скролимся до этого элемента
}

чистый JS. ну и вешаете обработчик клика и передаете ему эту функцию. должно, вроде бы, сработать. если хотите плавный переход, то используйте requestAnimationFrame. и да, может и не работать, так как проверить пока не могу :D