Элемент: свойство scrollTop

Свойство Element.scrollTop получает или устанавливает количество пикселей, на которое содержимое элемента прокручено от его верхней границы. Это значение имеет точность до дробных пикселей в современных браузерах, то есть это не обязательно целое число.

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

Возможным является ситуация, когда scrollTop может быть отрицательным, если элемент может быть прокручен вверх от исходного контейнера. Например, если свойство flex-direction имеет значение column-reverse и содержимое растет вверх, то scrollTop равно 0 когда полоса прокрутки находится в самом нижнем положении (в начале прокрученного содержимого), и затем становится всё более отрицательным при прокрутке к концу содержимого.

Safari реагирует на избыточную прокрутку, обновляя scrollTop за пределы максимального положения прокрутки (если эффект «отскока» по умолчанию отключён, например, путём установки overscroll-behavior в значение none), в то время как Chrome и Firefox этого не делают. Например, scrollTop может быть отрицательным в Safari просто за счёт продолжения прокрутки вверх, когда элемент уже находится в верхней части.

Свойство scrollTop может быть установлено, что приводит к прокрутке элемента до указанного вертикального положения, таким же образом, как при использовании Element.scroll() со значением behavior: "auto".

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

HTML

<div id="container">
  <p>
    Far out in the uncharted backwaters of the unfashionable end of the western
    spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this
    at a distance of roughly ninety-two million miles is an utterly
    insignificant little blue green planet whose ape-descended life forms are so
    amazingly primitive that they still think digital watches are a pretty neat
    idea.
  </p>
</div>

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

CSS

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

#output {
  padding: 1rem 0;
}

JavaScript

const container = document.querySelector("#container");
const output = document.querySelector("#output");

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

Результат

• Element.scrollLeft
• Element.scrollTo()