.scrollTo()

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

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

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

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

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

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

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

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

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

На практике

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

doka-dog

Секция статьи "doka-dog"

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

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