Bir JavaScript kaydırma bitiş noktası oluşturun

Mar 19 2023

Web sayfasında tembel yüklemeyi uygulamak için çevrimiçi olarak pek çok eklenti var. Ancak, yalnızca bir sayfanın belirli bir miktarını kaydırdıktan sonra bir geri arama işlevini tetiklerler. Kaydırma çubuğu sayfanın sonuna geldiğinde geri arama fonksiyonumuzu çağırabiliriz. Bu tür eklentiler çevrimiçi olarak mevcut olabilir, ancak onlar tarafından bilinmiyorum ve her zaman sıfırdan bir şeyler yaratmayı seviyorum. Öyleyse kendi kaydırma bitiş noktamızı yapalım.

1. Öncelikle bir HTML (index.html) ve bir js (script.js) dosyası oluşturun.

2. Şimdi verilen CSS'yi HTML dosyasının 'head' etiketine yapıştırın ve js dosyasını HTML ile bağlayın.

<!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. Şimdi bir kaydırma etkinliği oluşturma zamanı. Scroll olayının kodu aşağıda verilmiştir.

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

5. İstediğimizi başardık ve kodumuz şu anda sorunsuz çalışıyor. Ancak kodumuzda gizlenen küçük bir böcek var. CSS sıfırlama kodunu ( *{margin: 0; padding: 0;} ) HTML dosyasından kaldırırsak kodumuz çalışmayı durduracaktır . Şimdi sayfanın alt kısmında “ scrollLimitLeft” değişkeninin değerini kaydırdığını görürseniz , değer -16 olacaktır (Değer farklı tarayıcılarda değişebilir). Belki siz de benim gibi js kodumuzun bir satır CSS kodunun varlığından yola çıkarak çalışacağını düşünerek üzüldünüz. Ama merak etmeyin, okumaya devam edin, çözümü bulacaksınız.

6. Öncelikle bunun neden olduğunu bilmemiz gerekiyor. Aslında HTML'nin "body" etiketinde varsayılan bir kenar boşluğu vardır ve kaydırmak için biraz fazladan alan yaratır. Sonuç olarak sayfanın alt kısmında '0' yerine negatif bir sonuç alıyoruz. Bu nedenle , kodumuzu tekrar işe almak için " scrollLimitLeft " ten ekstra marjı çıkarmamız gerekiyor . Ekstra marjı bulalım.

7. Bölüm 3 kodlarından sonra verilen kodu yazınız.

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');
});

Peki siz bu minik proje hakkında ne düşünüyorsunuz? Beğendiyseniz lütfen alkışlayın ve projede herhangi bir hata bulursanız veya bu konuda herhangi bir öneriniz varsa, yorum bölümünde bana bildirin.