Элемент.scrollTop

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Свойство Element.scrollTop считывает или устанавливает количество пикселей, на которое содержимое элемента прокручено по вертикали.

Значение scrollTop элемента — это расстояние от верха элемента до его самого верхнего видимого содержимого. Если содержимое элемента не создает вертикальную полосу прокрутки, его значение scrollTop равно 0.

scrollTop может быть любым целым числом с определёнными оговорками:

  • Если элемент не может быть прокручен (например, у него нет переполнения или если элемент является не прокручиваемым), то scrollTop устанавливается в 0.
  • Если значение меньше 0, то scrollTop устанавливается в 0.
  • Если установлено значение, превышающее максимально доступное для элемента, то scrollTop устанавливает максимальное значение.

Когда scrollTop используется в корневом элементе (элементе <html>), возвращается scrollY окна. [Это особый случай scrollTop] (https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/#dom-element-scrolltop).

Предупреждение: В системах, использующих масштабирование дисплея, scrollTop может возвращать десятичное значение.

Значение

Число.

Примеры

Прокрутка элемента

В этом примере попробуйте прокрутить внутренний контейнер с пунктирной рамкой и посмотрите, как меняется значение scrollTop.

HTML

html
<div id="container">
  <div id="scroller">
    <p>
      Далеко-далеко на неизведанных, да и никому не интересных, задворках
      западного спирального рукава Галактики затеряно маленькое, невзрачное
      жёлтое солнце. Вокруг него на расстоянии приблизительно девяноста восьми
      миллионов миль вращается по своей орбите ничтожнейшая зелёно-голубая
      планета. Некоторые обитающие на ней живые организмы происходят от обезьян
      и так восхитительно примитивны, что до сих пор считают электронные часы
      довольно-таки гениальным изобретением.
    </p>
  </div>
</div>

<div id="output">scrollTop: 0</div>

CSS

css
#scroller {
  overflow: scroll;
  height: 150px;
  width: 150px;
  border: 5px dashed orange;
}

#output {
  padding: 1rem 0;
}

JavaScript

js
const scroller = document.querySelector("#scroller");
const output = document.querySelector("#output");

scroller.addEventListener("scroll", (event) => {
  output.textContent = `scrollTop: ${scroller.scrollTop}`;
});

Результат

Спецификации

Specification
CSSOM View Module
# dom-element-scrolltop

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также