scroll
Misol
<div> elementi aylantirilayotganda funksiyani chaqiring:
<div onscroll="myFunction()">
O‘zingiz sinab ko‘ring »
Tavsif
onscroll hodisasi elementning aylantirish paneli aylantirilayotganda sodir bo‘ladi.
Maslahat: Element uchun aylantirish paneli yaratish uchun CSS overflow uslub xususiyatidan foydalaning.
Brauzerlarda qo‘llab-quvvatlash
| Ha | Ha | Ha | Ha | Ha |
Sintaksis
JavaScript’da, addEventListener() metodi yordamida:
object.addEventListener("scroll", myScript);
O‘zingiz sinab ko‘ring »
Texnik tafsilotlar
| Ko‘tariladimi (bubbles): | Yo‘q |
|---|---|
| Bekor qilish mumkinmi: | Yo‘q |
| Hodisa turi: | Foydalanuvchi interfeysidan yuzaga kelgan bo‘lsa — UiEvent, aks holda — Event |
| HTML teglari: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> dan <h6> gacha, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM versiyasi: | Level 2 hodisalari |
Ko‘proq misollar
Misol
Turli aylantirish holatlarida class nomlarini almashtirish — foydalanuvchi sahifani yuqoridan 50 piksel pastga aylantirganda elementga "test" class nomi qo‘shiladi (yana yuqoriga aylantirilganda esa olib tashlanadi).
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 = "";
}
}
O‘zingiz sinab ko‘ring »
Misol
Foydalanuvchi sahifani yuqoridan 350 piksel pastga aylantirganda elementni siljitib chiqaring (slideUp klassini qo‘shing):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!