.scrollBy()

Прокрутить страницу на указанные величины.

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

Кратко

Скопировано

Метод scrollBy() позволяет программно прокрутить элемент на определённое количество пикселей относительно текущего положения.

Пример

Скопировано

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент:

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

div.scrollBy(0, 100)

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

Как пишется

Скопировано
        
          
          window.scrollBy(x, y);
          window.scrollBy(x, y);

        
        
          
        
      

Тут x и y — это координаты, на которые будет прокручено окно.

Вместо координат в scrollBy() можно передать объект с тремя параметрами:

  • top задаёт количество пикселей для прокрутки по оси Y;
  • left — то же самое, но по оси X;
  • behavior определяет поведение прокрутки. По умолчанию резкое auto, но можно указать плавный smooth.
        
          
          window.scrollBy({  top: 100,  left: 0,  behavior: 'smooth'})
          window.scrollBy({
  top: 100,
  left: 0,
  behavior: 'smooth'
})

        
        
          
        
      

Как понять

Скопировано

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