Блог

Я пытаюсь добиться следующего эффекта:

Когда вы нажимаете на .page div, полоса прокрутки автоматически прокручивается к нему, и этот .page элемент будет выглядеть так, как будто он центрирован в .pages элементе

Я пробовал такие вещи, как scrollIntoView() и другие методы, но я не смог добиться нужного scrollIntoView() результата, просто показывает элемент, который вы нажимаете. То, что я хочу, немного отличается, я хочу, чтобы полоса прокрутки плавно прокручивалась до точки, где выбранный .page элемент находится в центре .pages div. (если в элементе недостаточно элементов для центрирования, все в порядке, я просто хочу, чтобы полоса прокрутки работала наилучшим образом ..)

Вот ручка кода: https://codepen.io/liana-webdev/pen/WNGdzQE

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

Спасибо

behaviour:smooth Опция в scrollIntoView() функции поможет вам плавно перейти к определенному элементу. Эта block:center опция используется для размещения определенного элемента в центре экрана.

 document.getElementById("id").scrollIntoView({
  behavior: smooth,
  block: center
});
 

Нажмите здесь для получения более подробной информации.