Свойство scrollTop
Примеры element.scrollTop
Получите количество пикселей, на которое прокручено содержимое "myDIV":
const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;
Попробуйте сами »
Прокрутите содержимое "myDIV" ДО 50 пикселей по горизонтали и 10 пикселей по вертикали:
const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;
Попробуйте сами »
Прокрутите содержимое "myDIV" ДО на 50 пикселей по горизонтали и 10 пикселей по вертикали:
const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;
Попробуйте сами »
Ещё примеры ниже.
Описание scrollTop
Свойство scrollTop устанавливает или возвращает количество пикселей, на которое содержимое элемента прокручивается по вертикали.
Синтаксис scrollTop
Верните свойство scrollTop:
element.scrollTop
Установите свойство scrollTop:
element.scrollTop = pixels
Значение свойства scrollTop
| Значение | Описание |
|---|---|
| pixels |
Количество пикселей, на которое содержимое элемента прокручивается по вертикали. Если число отрицательное, число устанавливается равным 0. Если элемент не может быть прокручен, число устанавливается равным 0. Если число больше максимально допустимого, число устанавливается равным максимальному. |
Возвращаемое значение scrollTop
| Тип | Описание |
|---|---|
| Number | Количество пикселей, на которое содержимое элемента прокручивается по вертикали. |
Ещё примеры scrollTop
Прокрутите содержимое <body> на 30 пикселей по горизонтали и на 10 пикселей по вертикали:
const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;
Попробуйте сами »
Переключение между именами классов в разных позициях прокрутки — когда пользователь прокручивает страницу на 50 пикселей вниз от верхней части, имя класса "test" будет добавлено к элементу (и удалено при повторной прокрутке вверх):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Попробуйте сами »
Вставьте элемент, когда пользователь прокрутил страницу на 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 поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |