skip to main content

Element.scroll/scrollTo

js

Кратко 🔗

Функция scrollTo() позволяет программно прокрутить элемент на определенное количество пикселей. Колесо мышки или два пальца на тачпаде вызывают скролл с параметрами, определенными в системе. Главное понять, как управлять скроллом и обрабатывать событие «прокручивания».

Как пишется 🔗

Для скролла всего окна подойдет такая штука:

scrollTo(x, y)

Тут x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например в div) синтаксис немного отличается:

let elem = document.querySelector("div")
elem.scrollTo(0, 100) // позиция скролла внутри elem будет на 100 пикселей по оси Y от начала элемента

Как это понять 🔗

scrollTo() необходим в случае, когда прокрутку нужно совершить к определенным координатам на экране. В случае прокрутки относительно текущего положения следует воспользоваться scrollBy, а в случае прокрутки на конкретный элемент — функцией scrollIntoView.

В работе 🔗

Миша 👨‍🔧

🛠 Прокрутка на определенные координаты полезна, когда верстка страницы или элемента одинакова. Это сложно гарантировать в реальном мире, где сайт пытается адаптироваться под разрешение экрана каждого пользователя. Но рассмотрим пример из идеальной вселенной 🔮

See the Pen scrollTo - В работе by vindi-r (@vindi-r) on CodePen.

Во вселенной, где адаптивный дизайн используется везде — используют scrollBy или scrollIntoView 😎


Автор: Миша 👨‍🔧