onscroll

onscroll - прокрутка.

Синтаксис:

object.onscroll = function( event ){
// код функції, яка виконується коли відбувається подія
};

Параметри:

object - об'єкт для якого призначається подія.

event - об'єкт UIEvent який передається функції в якості параметра.

Опис:

onscroll - подія яка виникає при прокручуванні.

Приклад:

document.onscroll=function(){
alert("прокручування"); }

document.onscroll=function(e){
document.getElementById("res").innerHTML="window.scrollX: "+window.scrollX+"<br>window.scrollY: "+window.scrollY+"<br>window.scrollMaxX: "+window.scrollMaxX+"<br> window.scrollMaxY: "+window.scrollMaxY;
};

Перевірка чи прокручено елемент до кінця:

прокрутити вниз

document.getElementById('el_scroll').onscroll=function(){
if(this.scrollTop+this.offsetHeight==this.scrollHeight)alert('прокрутка сягнула кінця');
};

Прокрутка сторінки у вверх, приклад кнопки вверх:

^ вверх ^

//подія прокрутка документу
document.onscroll=function(e){
if(window.scrollY>150){
document.getElementById("top").style.display="block";
}
else document.getElementById("top").style.display="none";
};

//при кліку прокручуємо сторінку доверху
document.getElementById("top").onclick=function(){
window.scroll(0,0);
};

//вказуємо стилі для id="top"
var st=document.getElementById("top").style;
st.position="fixed";
st.bottom="25px";
st.padding="3px";
st.backgroundColor="#ff00aa";

Напрямок прокрутки документу:

window.oldScrollY = window.scrollY;
document.onscroll=function(e){
var res= window.oldScrollY>window.scrollY? "up" : "down";
window.oldScrollY=window.scrollY;

document.getElementById("isScroll").innerText=res;
}