Tạo điểm kết thúc cuộn JavaScript

Có rất nhiều plugin có sẵn trực tuyến để triển khai lazy loading trên trang web. Nhưng chúng chỉ kích hoạt chức năng gọi lại sau khi cuộn một lượng trang nhất định. Còn về việc chúng ta có thể gọi chức năng gọi lại của mình khi thanh cuộn đến cuối trang thì sao. Có thể những plugin như vậy có sẵn trực tuyến nhưng tôi không biết chúng và tôi luôn thích tạo thứ gì đó từ đầu. Vì vậy, hãy tạo điểm kết thúc cuộn của riêng chúng ta.

1. Trước hết hãy tạo một tệp HTML (index.html) và tệp js (script.js).

2. Bây giờ dán CSS đã cho vào thẻ 'head' của tệp HTML và liên kết tệp js với HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll ending point with JavaScript</title>

    <style>
      *{
        margin: 0;
        padding: 0;
      }

      body{
        height: 200vh;
      }
    </style>
  </head>

  <body>

    <script src="script.js"></script>
  </body>
</html>

const selector = el=>document.querySelector(el);
const body = selector('body');

4. Bây giờ là lúc tạo sự kiện cuộn. Mã của sự kiện cuộn được đưa ra bên dưới-

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y;
  if(scrollLimitLeft===0)console.log('End of the scroll');
});

5. Chúng tôi đã đạt được những gì chúng tôi muốn và mã của chúng tôi vẫn đang chạy trơn tru. Nhưng có một lỗi nhỏ ẩn trong mã của chúng tôi. Mã của chúng tôi sẽ ngừng hoạt động nếu chúng tôi xóa mã đặt lại CSS ( *{margin: 0; padding: 0;} ) khỏi tệp HTML. Nếu bạn thấy giá trị của biến “ scrollLimitLeft” hiện đang cuộn ở cuối trang, giá trị sẽ là -16 (Giá trị có thể khác nhau trong các trình duyệt khác nhau). Có thể bạn cũng khó chịu như tôi khi nghĩ rằng mã js của chúng ta sẽ hoạt động trên cơ sở có sự hiện diện của một dòng mã CSS. Nhưng đừng lo lắng, hãy tiếp tục đọc và bạn sẽ có giải pháp.

6. Đầu tiên chúng ta cần biết tại sao điều này lại xảy ra. Trên thực tế, HTML có một lề mặc định trong thẻ “body” của nó và nó tạo thêm một số khoảng trống để cuộn. Kết quả là chúng tôi nhận được kết quả âm thay vì '0' ở cuối trang. Vì vậy, chúng tôi cần trừ phần dư thừa từ “ scrollLimitLeft ” để mã của chúng tôi hoạt động trở lại. Vì vậy, hãy tìm hiểu thêm lề.

7. Viết mã đã cho sau mã của phần 3

const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

const selector = el=>document.querySelector(el);
const body = selector('body');
const extraMargin = selector('html').scrollHeight - body.scrollHeight;

window.addEventListener('scroll', ()=>{
  const rect = body.getBoundingClientRect();
  const scrollLimitLeft = rect.bottom + rect.y + extraMargin;

  if(scrollLimitLeft===0)console.log('End of the scroll');
});

Vậy bạn nghĩ sao về dự án nhỏ bé này? Nếu bạn thích nó, xin hãy vỗ tay và nếu bạn tìm thấy bất kỳ lỗi nào trong dự án hoặc có bất kỳ đề xuất nào về nó, hãy cho tôi biết trong phần bình luận.