Buat titik akhir gulir JavaScript

Mar 19 2023

Ada begitu banyak plugin yang tersedia online untuk mengimplementasikan lazy loading di halaman web. Tapi mereka hanya memicu fungsi panggilan balik setelah menggulir sejumlah halaman.

Ada begitu banyak plugin yang tersedia online untuk mengimplementasikan lazy loading di halaman web. Tapi mereka hanya memicu fungsi panggilan balik setelah menggulir sejumlah halaman. Bagaimana kalau kita dapat memanggil fungsi callback kita ketika scrollbar mencapai akhir halaman. Mungkin plugin semacam itu tersedia online tetapi saya tidak mengetahuinya dan saya selalu suka membuat sesuatu dari awal. Jadi mari kita buat titik akhir gulir kita sendiri.

1. Pertama-tama buat file HTML (index.html) dan js (script.js).

2. Sekarang rekatkan CSS yang diberikan di tag 'head' dari file HTML dan tautkan file js dengan 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. Sekarang saatnya membuat acara gulir. Kode acara gulir diberikan di bawah ini-

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

5. Kami telah mencapai apa yang kami inginkan dan kode kami masih berjalan lancar sekarang. Tapi ada bug nyaring yang bersembunyi di kode kami. Kode kami akan berhenti berfungsi jika kami menghapus kode reset CSS ( *{margin: 0; padding: 0;} ) dari file HTML. Jika Anda melihat nilai variabel " scrollLimitLeft" sekarang bergulir di bagian bawah halaman, nilainya akan menjadi -16 (Nilainya mungkin berbeda di browser yang berbeda). Mungkin Anda kesal seperti saya berpikir bahwa kode js kami akan berfungsi berdasarkan adanya sebaris kode CSS. Tapi jangan khawatir, teruslah membaca dan Anda akan mendapatkan solusinya.

6. Pertama kita perlu tahu mengapa hal ini terjadi. Sebenarnya HTML memiliki margin default di tag "body" dan itu menciptakan beberapa ruang ekstra untuk menggulir. Akibatnya, kami mendapatkan hasil negatif alih-alih '0' di bagian bawah halaman. Jadi kita perlu mengurangi margin ekstra dari " scrollLimitLeft " agar kode kita kembali berfungsi. Jadi mari kita cari tahu margin ekstra.

7. Tulis kode yang diberikan setelah kode bagian 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');
});

Jadi apa pendapat Anda tentang proyek kecil ini? Jika Anda menyukainya, beri tepuk tangan dan jika Anda menemukan kesalahan dalam proyek atau memiliki saran tentangnya, beri tahu saya di bagian komentar.