Cách phát hiện khi người dùng cuộn xuống cuối trang bằng JavaScript

Tìm hiểu cách phát hiện khi người dùng cuộn xuống cuối trang bằng JavaScript thô.

Đôi khi bạn muốn kích hoạt một sự kiện, khi người dùng đã cuộn đến cuối trang hoặc một phần cụ thể.

Dò tìm cuộn xuống dưới cùng (hoạt động trong tất cả các trình duyệt hiện đại, IE9 trở lên)

window.onscroll = function() {
 if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
  alert("At the bottom!")
 }
}

Giải pháp trường hợp cạnh:

Nếu cách đầu tiên không hoạt động, hãy thử sử dụng Math.ceil() phương thức trên window.pageYOffset :

window.onscroll = function() {
  if ((window.innerHeight + Math.ceil(window.pageYOffset)) >= document.body.offsetHeight) {
  alert('At the bottom!')
  }
}

Lý do sử dụng Math.ceil là một số trình duyệt sử dụng độ chính xác subpixel trên các phần tử. Ví dụ. chiều rộng hoặc chiều cao có thể là 500,25px.

Math.ceil sẽ làm tròn lên trên, ví dụ:1.45px trở thành 2px.

Cũng có sự cố với một số máy tính Mac, điều này sẽ làm lệch chiều cao cửa sổ đi 1px. Để khắc phục điều đó, bạn có thể trừ một vài pixel khỏi chiều cao tài liệu:

(window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 2

Lưu ý:scrollY thường được sử dụng thay vì pageYOffset . Nhưng scrollY không hoạt động trong Internet Explorer. Để có khả năng tương thích trên nhiều trình duyệt hiện đại, hãy sử dụng pageYOffset .

Đây là CodePen hiển thị một ví dụ hoạt động.

Nếu bạn bối rối về mối quan hệ giữa window.innerHeight , window.pageYOffset và document.body.offsetHeight đây là một chức năng trợ giúp nhỏ ghi lại giá trị pixel của từng pixel khi youscroll:

window.onscroll = function() {
  console.log('Window height (px):', window.innerHeight)
  console.log('Currently scrolled from top (px):', window.pageYOffset)
  console.log('Document height(px):', document.body.offsetHeight)   
}

Điều đó sẽ giúp bạn dễ hiểu hơn về cách hoạt động của chức năng phát hiện cuộn. Ban đầu pageYOffset làm tôi bối rối. Nó đề cập đến số lượng hiện tại pixel được cuộn theo chiều dọc từ trên xuống.