Скроллинг до элемента внутри div с помощью JavaScript

Быстрый ответ

Для того чтобы осуществить переход к элементу, расположенному внутри div, воспользуйтесь методом scrollIntoView():

document.querySelector('#element').scrollIntoView({ behavior: 'smooth' });

При использовании этого метода, элемент #element плавно подвинется к центру видимой области.

Подробное рассмотрение scrollIntoView

Метод scrollIntoView() является универсальным средством, позволяющим быстро отображать элемент в видимой части документа. Опция { behavior: 'smooth' } обеспечивает плавность движения, создавая иллюзию скольжения к цели на ховерборде.

Вы можете более точно настроить позицию, задействовав свойства scrollTop и offset:

const scrollableContainer = document.querySelector('.scrollable-div');
const targetElement = document.querySelector('#target-element');

const topPosition = targetElement.offsetTop – scrollableContainer.offsetTop;

scrollableContainer.scrollTop = topPosition;

В результате элемент #target-element аккуратно станет видимым внутри scrollable-div.

Методы прокрутки

Настройка scrollTop для позиционирования элемента

Если вам приходится работать с динамическими элементами или компонентами со вложенностью, вы можете прямо менять значение scrollTop:

const myElement = document.getElementById('desiredElement');
const containerDiv = myElement.parentNode;
const elementOffset = myElement.offsetTop;

containerDiv.scrollTop = elementOffset;

Такое действие переместит элемент myElement вверх контейнера.

Подробнее об этом расскажет наш спикер на видео

Добавление плавности прокрутки с помощью CSS

Чтобы обеспечить плавность прокрутки на всем веб-сайте, используйте:

.scrollable-div {
  scroll-behavior: smooth;
}

Теперь прокрутка внутри .scrollable-div станет мягкой, подобно скольжению по льду.

Проверка видимости элемента перед прокруткой

Перед тем как осуществить прокрутку, проверьте, действительно ли она необходима:

function scrollIfNeeded(container, element) {
  const elementRect = element.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();
  
  if (elementRect.top < containerRect.top || elementRect.bottom > containerRect.bottom) {
    element.scrollIntoView({ behavior: "smooth" });
  }
}

Это поможет избежать ненужных действий и улучшит веб-практику.

Оформление прокручивающегося контейнера

Вы должны правильно настроить ваш контейнер для корректной работы прокрутки:

.scrollable-div {
  overflow-y: auto;
  height: 300px;
  position: relative;
}

Использование подходящей конфигурации обеспечит удобство при прокрутке.

События, инициирующие прокрутку

Часто причиной прокрутки становятся различные события, в частности, клики:

document.querySelector('#scroll-button').addEventListener('click', () => {
  document.querySelector('#target-element').scrollIntoView({ behavior: 'smooth' });
});

Таким образом, клик по #scroll-button плавно переместит вас к элементу #target-element.

Преодоление проблем совместимости браузеров

scrollIntoView в большинстве случаев хорошо справляется со своими задачами, но при использовании параметра smooth иногда могут возникать проблемы совместимости. Воспользуйтесь caniuse.com для проверки поддержки, и не забудьте предусмотреть альтернативные варианты для браузеров, которые не поддерживают smooth.

Визуализация

Предположим, вам нужно найти книгу 📚 в определённой секции библиотеки 🏠:

Библиотека (🏠): [Книга А, Книга B, Книга В, **Книга Г**, Книга Д]

И вам нужна Книга Г:

document.querySelector('.library-section').scrollTop = document.querySelector('**Книга Г**').offsetTop;

🏠👀📚: Мы перемещаемся к **Книге Г** в библиотеке.

Теперь эту книгу вы видите прямо перед собой.

Пользовательский опыт: ключ к успеху

Прокрутка должна улучшать, а не ухудшать пользовательский опыт. Она не должна быть слишком быстрой и вызывать дискомфорт. Плавная прокрутка помогает легко направлять внимание пользователя на важные разделы, не отвлекая его.

Полезные материалы

1. Element: scrollIntoView() method – Web APIs | MDN — подробная документация по scrollIntoView() от MDN Web Docs.
2. Smooth Scrolling | CSS-Tricks – CSS-Tricks — урок по плавной прокрутке в jQuery от CSS-Tricks.
3. How To Create a Smooth Scrolling Effect — пошаговая инструкция о создании плавной прокрутки на CSS от W3Schools.
4. javascript – Scroll to an element with jQuery – Stack Overflow — обсуждение различных вариантов прокрутки в jQuery на Stack Overflow.
5. .animate() | jQuery API Documentation — документация API jQuery об использовании анимированной прокрутки.
6. Practical CSS Scroll Snapping | CSS-Tricks – CSS-Tricks — подробное руководство по "снеппингу" прокрутки в CSS от CSS-Tricks.
7. Designing Safer Web Animation For Motion Sensitivity – A List Apart — статья о проектировании анимаций с учётом чувствительности к движению.