Свойство scrollTop
Пример
Получить количество пикселей, на которые содержимое элемента <div> прокручивается по горизонтали и вертикали:
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство scrollTop задает или возвращает количество пикселей, на которые содержимое элемента прокручивается по вертикали.
Совет: Используйте свойство scrollLeft для установки или возврата количества пикселей, на которые содержимое элемента прокручивается по горизонтали.
Совет: Чтобы добавить полосы прокрутки к элементу, используйте CSS свойство overflow.
Совет: В событие onscroll возникает, когда прокручивается полоса прокрутки элемента.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
scrollTop | Да | Да | Да | Да | Да |
Синтаксис
Верните свойство scrollTop:
element.scrollTop
Установите свойство scrollTop:
element.scrollTop = pixels
Свойство значений
Значение | Описание |
---|---|
pixels |
Задает количество пикселей, на которые содержимое элемента прокручивается по вертикали. Специальные ПримечаниеS:
|
Технические детали
Вернёт значение | Число, представляющее количество пикселей, на которые содержимое элемента было прокручено по вертикали |
---|
Ещё примеры
Пример
Прокрутите содержимое элемента <div> ДО 50 пикселей по горизонтали и 10 пикселей по вертикали:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft = 50;
elmnt.scrollTop = 10;
Попробуйте сами »
Пример
Прокрутите содержимое элемента <div> НА 50 пикселей по горизонтали и 10 пикселей по вертикали:
var elmnt = document.getElementById("myDIV");
elmnt.scrollLeft += 50;
elmnt.scrollTop += 10;
Попробуйте сами »
Пример
Прокрутите содержимое <body> на 30 пикселей по горизонтали и 10 пикселей по вертикали:
var body = document.body; // Safari
var html = document.documentElement; //
Chrome, Firefox, IE и Opera помещает переполнение на уровень <html>, если не указано иное. Поэтому используем свойство
documentElement для этих браузеров
body.scrollLeft += 30;
body.scrollTop += 10;
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";
}
}
Попробуйте сами »
Пример
Нарисуйте треугольник при прокрутке:
<!-- Используйте SVG, чтобы нарисовать треугольник (должен быть <path>) -->
<svg id="mySVG">
<path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z">
</svg>
<script>
// Получите идентификатор элемента <path> и длину <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();
// Начальное положение чертежа
triangle.style.strokeDasharray = length;
// Скройте треугольник, сдвинув черточку. Удалите эту линию, чтобы показать треугольник перед рисованием прокрутки
triangle.style.strokeDashoffset = length;
// Найдите процент прокрутки при прокрутке (используя свойства кросс-браузера) и смещайте тире на ту же величину, что и процент прокрутки
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Переверните рисунок (при прокрутке вверх)
triangle.style.strokeDashoffset = length - draw;
}
</script>
Попробуйте сами »