Cách phát hiện khi người dùng cuộn đến cuối trang với JavaScript

Học cách phát hiện khi người dùng cuộn xuống gần cuối trang bằng JavaScript thuần.

Đô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 khu vực cụ thể.

Phát hiện cuộn đến cuối (hoạt động trên mọi 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 cho trường hợp đặc biệt:

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

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

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

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

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

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

Lưu ý: scrollY thường dùng thay pageYOffset. Nhưng scrollY không hoạt động trên Internet Explorer. Để tương thích cross-browser hiện đại, dùng pageYOffset.

Đây là CodePen 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à hàm helper nhỏ ghi log giá trị pixel của mỗi thứ khi bạn cuộn:

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 dễ hiểu hơn cách hàm phát hiện cuộn hoạt động. Ban đầu pageYOffset làm tôi bối rối. Nó chỉ số pixel hiện tại đã cuộn dọc từ trên xuống.