Свойство scrollY
Пример scrollY
Прокрутите содержимое на 100 пикселей и включите scrollX и scrollY:
window.scrollBy(100, 100);
alert(window.scrollX + window.scrollY);
Попробуйте сами »
Ещё примеры ниже.
Описание scrollY
Свойство scrollY возвращает количество пикселей, на которое документ прокручен из верхнего левого угла окна.
Свойство scrollY доступно только для чтения.
Примечание scrollY
Свойство scrollY эквивалентно свойству pageYOffset.
Для кроссбраузерной совместимости используйте window.pageYOffset вместо window.scrollY.
Похожи на scrollY
Синтаксис scrollY
window.scrollY
или просто:
scrollY
Возвращаемое значение scrollY
| Тип | Описание |
|---|---|
| Number | Количество пикселей, на которое прокручен документ от верхнего левого угла окна. |
Ещё примеры scrollY
Создайте липкую панель навигации:
// Получить навигационную панель
const navbar = document.getElementById("navbar");
// Получить смещение позиции навигационной панели
const sticky = navbar.offsetTop;
// Добавьте липкий класс к навигационной панели, когда вы достигнете ее позиции прокрутки. Удалите липкий класс, когда вы покинете позицию прокрутки.
function myFunction() {
if (window.scrollY >= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »
Поддержка браузера scrollY
window.scrollY поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |