Element.scrollTo()

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Метод 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.

На практике

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

Дока Дог

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

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

Открыть демо в новой вкладке

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