HTML DOM Element scrollTop свойство

Определение и использование

scrollTop Свойство устанавливает или возвращает количество пикселей вертикальной прокрутки содержимого элемента.

См. также:

scrollLeft свойство

Свойство overflow CSS

Событие onscroll

Пример

Пример 1

Получите количество пикселей прокрутки содержимого "myDIV":

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

Попробуйте сами

Пример 2

Прокрутите содержимое "myDIV" на 50 пикселей в горизонтальном направлении и на 10 пикселей в вертикальном направлении:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

Попробуйте сами

Пример 3

Прокрутите содержимое "myDIV" на 50 пикселей в горизонтальном направлении и на 10 пикселей в вертикальном направлении:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

Попробуйте сами

Пример 4

Вертикально прокрутить содержимое <body> на 10 пикселей и горизонтально на 30 пикселей:

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

Попробуйте сами

Пример 5

Переключение между именами классов в различных положениях прокрутки - когда пользователь прокручивает вниз от верха страницы на 50 пикселей, имя класса "test" добавляется к элементу (и удаляется при повторном прокрутке вверх):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Попробуйте сами

Пример 6

Когда пользователь прокручивает вниз от верха страницы на 350 пикселей, ввести элемент (добавить класс slideUp):

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

Попробуйте сами

Синтаксис

Возвратить свойство scrollTop:

element.scrollTop

Установить свойство scrollTop:

element.scrollTop = pixels

Значение свойства

Значение Описание
pixels

Количество пикселей вертикального скролла содержимого элемента.

  • Если это число отрицательное, то это число устанавливается в 0.
  • Если элемент не может скроллить, то это число устанавливается в 0.
  • Если это число больше максимального разрешенного значения, то это число устанавливается в максимальное значение.

Возвратное значение

Тип Описание
Число Количество пикселей вертикального скролла содержимого элемента.

Поддержка браузера

Все браузеры поддерживают element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка