.scrollTo()

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

Для скролла всего окна:

        
          
          scrollTo(x, y)
          scrollTo(x, y)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

Для скролла внутри элемента (например, в <div>) нужно сначала получить элемент. Прокрутим первый <div> на странице на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появился скроллбар).

        
          
          const elem = document.querySelector('div')elem.scrollTo(0, 100)
          const elem = document.querySelector('div')
elem.scrollTo(0, 100)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

На практике

Секция статьи "На практике"

Дока Дог советует

Секция статьи "Дока Дог советует"

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

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

+ Развернуть