sự kiện cuộn lên
Sự miêu tả
Sự kiện onscroll xảy ra khi thanh cuộn của một phần tử đang được cuộn.
Mẹo: sử dụng thuộc tính kiểu tràn CSS để tạo thanh cuộn cho một phần tử.
Hỗ trợ trình duyệt
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trong JavaScript, sử dụng phương thức addEventListener():
object .addEventListener("scroll", myScript );
Hãy tự mình thử » Chi tiết kỹ thuật
Bong bóng: | KHÔNG |
---|---|
Có thể hủy: | KHÔNG |
Loại sự kiện: | UiEvent nếu được tạo từ giao diện người dùng, Sự kiện nếu không |
Thẻ HTML: | <địa chỉ>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > tới <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <đầu>, <ul> |
Phiên bản DOM: | Sự kiện cấp 2 |
Thêm ví dụ
Ví dụ
Chuyển đổi giữa các tên lớp trên các vị trí cuộn khác nhau - Khi người dùng cuộn xuống 50 pixel từ đầu trang, tên lớp "test" sẽ được thêm vào một thành phần (và bị xóa khi cuộn lên lại).
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 = "";
}
}
Hãy tự mình thử »Ví dụ
Trượt vào một phần tử khi người dùng đã cuộn xuống 350 pixel từ đầu trang (thêm lớp slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
Hãy tự mình thử »