sự kiện onscroll
Thí dụ
Thực thi JavaScript khi phần tử <div> đang được cuộn:
<div onscroll="myFunction()">
Định nghĩa và Cách sử dụng
Sự kiện trên cuộn xảy ra khi thanh cuộn của 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 HTML:
<element onscroll="myScript">
Trong JavaScript:
object.onscroll = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("scroll", myScript);
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
| Bong bóng: | Không |
|---|---|
| Có thể hủy bỏ: | 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 |
| Các thẻ HTML được hỗ trợ: | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > đến <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textareosystem, <tfoot>, <thead>, <ul> |
| Phiên bản DOM: | Sự kiện cấp 2 |
Các ví dụ khác
Thí 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 "kiểm tra" sẽ được thêm vào một phần tử (và bị xóa khi cuộn lên lần nữa).
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 = "";
}
}
Thí dụ
Trượt trong 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";
}
}