Sự kiện onscroll

Sự kiện DOM Đối tượng Event

Định nghĩa và cách sử dụng

Sự kiện onscroll xảy ra khi thanh cuộn của phần tử được cuộn.

Lưu ý:Vui lòng sử dụng CSS overflow Thuộc tính kiểu tạo thanh cuộn cho phần tử.

Mẫu

Ví dụ 1

Thực hiện JavaScript khi cuộn phần tử <div>:

<div onscroll="myFunction()">

Thử trực tiếp

Ví dụ 2

Chuyển đổi giữa các tên lớp tại các vị trí cuộn khác nhau - Khi người dùng cuộn xuống từ đầu trang 50 pixel, tên lớp "test" sẽ được thêm vào phần tử (sẽ bị xóa khi cuộn lên).

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

Thử trực tiếp

Ví dụ 3

Khi người dùng cuộn từ trên xuống dưới 350 pixel trên trang, di chuyển vào phần tử (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";
  }
}

Thử trực tiếp

Cú pháp

Trong HTML:

<element onscroll="myScript">

Thử trực tiếp

Trong JavaScript:

object.onscroll = function(){myScript};

Thử trực tiếp

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("scroll", myScript);

Thử trực tiếp

Chú ý:Internet Explorer 8 hoặc các phiên bản sớm hơn không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Bubbling: Không hỗ trợ
Có thể hủy bỏ: Không hỗ trợ
Loại sự kiện: Nếu được tạo từ giao diện người dùng:UiEvent。 Event。
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>, <textarea>, <tfoot>, <thead>, <ul>
Phiên bản DOM: Sự kiện cấp 2

Hỗ trợ trình duyệt

Sự kiện Chrome IE Firefox Safari Opera
onscroll Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ
Sự kiện DOM Đối tượng Event