CSS Scroll End: Aylantirish tugashini aniqlash va boshqarish

Zamonaviy veb-dasturlashda foydalanuvchiga uzluksiz va jozibali tajriba taqdim etish juda muhimdir. Vebdagi asosiy o‘zaro ta’sir bo‘lgan aylantirish (scrolling) ko‘pincha foydalanuvchi tajribasini yaxshilashda e’tibordan chetda qoladi. Foydalanuvchi aylantiriladigan konteyner yoki hujjatning oxiriga yetganini bilish dinamik kontent yuklash, animatsiyalar va boshqa interaktiv xususiyatlar uchun keng imkoniyatlar ochadi. Ushbu maqolada CSS va JavaScript yordamida aylantirish hodisalari tugashini aniqlash va boshqarish usullari, brauzer mosligi masalalari va amaliy misollar ko‘rib chiqiladi.

Aylantirish tugashini aniqlash zaruratini tushunish

Foydalanuvchi aylantirishni tugatganini bilish nima uchun muhim? Mana bir nechta asosli sabablar:

• Cheksiz aylantirish (Infinite Scrolling): Foydalanuvchi sahifaning quyi qismiga yaqinlashganda yangi kontent yuklanadigan mashhur "cheksiz aylantirish" naqshini joriy qiling. Bu foydalanuvchilarni aniq sahifalashni talab qilmasdan uzluksiz kontent oqimi bilan ta'minlash orqali jalb qilishni kuchaytiradi. LinkedIn kabi ijtimoiy media lentalarini yoki butun dunyodagi yangiliklar agregatorlarini o'ylab ko'ring.
• Kechiktirilgan yuklash (Lazy Loading): Rasmlar va boshqa resurslarni ular ko‘rish oynasida ko‘rinishidan oldin yuklashni kechiktiring. Bu sahifaning dastlabki yuklanish vaqtini yaxshilaydi va o‘tkazish qobiliyatini (bandwidth) kamaytiradi, bu ayniqsa cheklangan ma’lumotlar rejasiga ega yoki sekin internet aloqasi bo‘lgan foydalanuvchilar uchun foydalidir. Ko‘plab mahsulot rasmlariga ega bo‘lgan elektron tijorat veb-saytlarini ko'rib chiqing.
• Animatsiyalar va effektlar: Foydalanuvchi sahifaning ma'lum bo'limlariga yetganda animatsiyalar yoki vizual effektlarni ishga tushirib, yanada dinamik va qiziqarli ko'rish tajribasini yarating. Siz pastga aylantirganingizda loyihalar animatsiya bilan paydo bo'ladigan portfolio veb-saytini tasavvur qiling.
• Foydalanuvchiga fikr-mulohaza bildirish: Foydalanuvchi kontent oxiriga yetganda, masalan, "Yuqoriga qaytish" tugmasi yoki yuklash uchun boshqa kontent yo'qligini ko'rsatuvchi xabar kabi fikr-mulohazalarni taqdim eting. Bu foydalanish qulayligini yaxshilaydi va foydalanuvchining hafsalasi pir bo'lishining oldini oladi.
• Analitik kuzatuv: Foydalanuvchilar sahifani qanchalik pastga aylantirganini kuzatib, kontent bilan o‘zaro ta’sir haqida tushunchaga ega bo‘ling va sahifa joylashuvini optimallashtiring. Ushbu ma'lumotlar kontent yaratuvchilar va marketologlar uchun bebaho bo'lishi mumkin.

Aylantirish tugashini aniqlash: Usullar va kod misollari

Aylantirish tugashini aniqlashning bir necha yo'li mavjud bo'lib, har birining o'z afzalliklari va kamchiliklari bor. Biz CSS va JavaScript'ga asoslangan yondashuvlarni ko'rib chiqamiz.

1. JavaScript asosida aylantirish tugashini aniqlash

Eng keng tarqalgan va moslashuvchan yondashuv JavaScript yordamida scroll hodisasini tinglash va joriy aylantirish pozitsiyasini umumiy aylantiriladigan balandlikka nisbatan hisoblashni o'z ichiga oladi. Mana asosiy tushunchalar va kod misollari:

a. scroll hodisasi

scroll hodisasi elementning aylantirish pozitsiyasi o'zgarganda ishga tushadi. Biz hodisa tinglovchisini oynaga (butun hujjat uchun) yoki ma'lum bir aylantiriladigan konteynerga biriktirishimiz mumkin.

Misol:

            window.addEventListener('scroll', function() {
  // Aylantirish paytida bajariladigan kod
});

            

              
                Copy
              
            
          

b. Aylantirish pozitsiyasini hisoblash

Foydalanuvchi aylantirish oxiriga yetganini aniqlash uchun biz joriy aylantirish pozitsiyasini umumiy aylantiriladigan balandlik bilan solishtirishimiz kerak. Mana bu qiymatlarni qanday hisoblashimiz mumkin:

• Joriy aylantirish pozitsiyasi: window.scrollY (yoki eski brauzerlar uchun document.documentElement.scrollTop)
• Oyna balandligi: window.innerHeight
• Hujjat balandligi: document.documentElement.scrollHeight

Foydalanuvchi joriy aylantirish pozitsiyasi va oyna balandligi yig'indisi hujjat balandligidan katta yoki unga teng bo'lganda aylantirish oxiriga yetgan hisoblanadi.

c. To'liq JavaScript misoli

            window.addEventListener('scroll', function() {
  const scrollY = window.scrollY || document.documentElement.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollY + windowHeight >= documentHeight) {
    // Foydalanuvchi aylantirish oxiriga yetdi
    console.log('Aylantirish oxiriga yetildi!');
    // Bu yerga o'z mantig'ingizni qo'shing (masalan, ko'proq kontent yuklash)
  }
});

            

              
                Copy
              
            
          

Tushuntirish:

• Kod oynaga scroll hodisasi tinglovchisini biriktiradi.
• Hodisa tinglovchisi ichida u joriy aylantirish pozitsiyasi, oyna balandligi va hujjat balandligini hisoblaydi.
• U aylantirish pozitsiyasi va oyna balandligi yig'indisini hujjat balandligi bilan solishtirib, foydalanuvchi aylantirish oxiriga yetganini tekshiradi.
• Agar foydalanuvchi oxiriga yetsa, u konsolga xabar chiqaradi va sizning maxsus mantig'ingiz uchun joy ajratadi.

d. Aylantirish hodisalarini Debouncing/Throttling qilish

Agar sizning aylantirish tugashini boshqarish mantig'ingiz hisoblash jihatidan murakkab bo'lsa, scroll hodisasi juda tez-tez ishga tushishi mumkin, bu esa ishlash muammolariga olib kelishi mumkin. Buning oldini olish uchun siz debouncing yoki throttling usullaridan foydalanishingiz mumkin.

Debouncing: Funksiya chaqirilganidan keyin ma'lum bir vaqt o'tguncha funksiya bajarilishini kechiktiradi.

            function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const handleScroll = () => {
  // Sizning aylantirish tugashini boshqarish mantig'ingiz shu yerda
  console.log('Aylantirish tugadi (debounced)');
};

const debouncedHandleScroll = debounce(handleScroll, 250); // 250ms kechikish

window.addEventListener('scroll', debouncedHandleScroll);

            

              
                Copy
              
            
          

Throttling: Funksiyaning ishga tushiruvchi hodisa qanchalik tez-tez sodir bo'lishidan qat'i nazar, faqat muntazam intervalda bajarilishini ta'minlaydi.

            function throttle(func, interval) {
  let lastTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastTime >= interval) {
      func.apply(this, args);
      lastTime = now;
    }
  };
}

const handleScroll = () => {
  // Sizning aylantirish tugashini boshqarish mantig'ingiz shu yerda
  console.log('Aylantirish tugadi (throttled)');
};

const throttledHandleScroll = throttle(handleScroll, 250); // 250ms interval

window.addEventListener('scroll', throttledHandleScroll);

            

              
                Copy
              
            
          

Aylantirish tugashini boshqarish mantig'ingizning o'ziga xos talablariga qarab, ehtiyojlaringizga eng mos keladigan debouncing yoki throttling usulini tanlang.

2. CSS asosida aylantirish tugashini aniqlash (Intersection Observer API bilan)

CSS to'g'ridan-to'g'ri "aylantirish oxiri" hodisasini taqdim etmasa-da, biz shunga o'xshash effektga erishish uchun Intersection Observer API'dan foydalanishimiz mumkin. Ushbu API sizga maqsadli elementning ajdod elementi yoki hujjatning ko'rish oynasi bilan kesishishidagi o'zgarishlarni asinxron tarzda kuzatish imkonini beradi.

a. U qanday ishlaydi

Biz "qo'riqchi" (sentinel) elementini (masalan, oddiy <div>) yaratamiz va uni aylantiriladigan konteynerning oxiriga joylashtiramiz. Intersection Observer ushbu qo'riqchi elementni kuzatib boradi. Qo'riqchi element ko'rish oynasida ko'rinadigan bo'lganda (ya'ni, ko'rish oynasi bilan kesishganda), bu foydalanuvchi aylantirish oxiriga yetganini bildiradi.

b. Kod misoli

HTML:

            <div class="scrollable-container">
  <!-- Content -->
  <div id="sentinel"></div>
</div>

            

              
                Copy
              
            
          

CSS:

            .scrollable-container {
  overflow: auto;
  height: 300px; /* Adjust as needed */
  position: relative; /* Required for absolute positioning of the sentinel */
}

#sentinel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* Make it small and invisible */
}

            

              
                Copy
              
            
          

JavaScript:

            const sentinel = document.getElementById('sentinel');

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Qo'riqchi ko'rinmoqda, aylantirish oxiriga yetildi
      console.log('Aylantirish oxiriga yetildi (Intersection Observer)!');
      // Bu yerga o'z mantig'ingizni qo'shing
      // Agar faqat bir marta ishga tushirish kerak bo'lsa, observer'ni uzing
      // observer.disconnect();
    }
  });
});

observer.observe(sentinel);

            

              
                Copy
              
            
          

Tushuntirish:

• HTML aylantiriladigan konteynerni va pastki qismida qo'riqchi elementni belgilaydi.
• CSS konteynerni aylantiriladigan qilib uslublaydi va qo'riqchini pastki qismga joylashtiradi.
• JavaScript qo'riqchi elementni kuzatadigan Intersection Observer yaratadi.
• Qo'riqchi ko'rish oynasi bilan kesishganda, yozuvning isIntersecting xususiyati true ga o'rnatiladi va aylantirish oxiri mantig'ini ishga tushiradi.

c. Intersection Observer API'ning afzalliklari

• Ishlash samaradorligi: Intersection Observer API elementlarning ko'rinishini aniqlash uchun yuqori samarali va optimallashtirilgan.
• Asinxron: U asinxron ishlaydi, asosiy ish oqimini bloklashdan saqlaydi va silliq foydalanuvchi tajribasini ta'minlaydi.
• Deklarativ: U JavaScript'da aylantirish pozitsiyalarini qo'lda hisoblashga qaraganda aylantirish oxirini aniqlashning ancha deklarativ usulini taqdim etadi.

3. CSS overscroll-behavior (Cheklangan aylantirish tugashini boshqarish)

CSS overscroll-behavior xususiyati elementning aylantirish chegarasiga yetganda nima sodir bo'lishini nazorat qiladi. Garchi u aylantirish *qachon* tugashini to'g'ridan-to'g'ri aniqlamasa-da, u aylantirish zanjirini (aylantirish ota-ona elementida davom etadigan) oldini olishi va potentsial vizual belgilarni ishga tushirishi mumkin. Biroq, u aylantirish oxirini dasturiy ravishda aniqlash uchun kamroq foydali.

Misol:

            .scrollable-container {
  overflow: auto;
  overscroll-behavior: contain; /* Aylantirish zanjirini oldini oladi */
}

            

              
                Copy
              
            
          

overscroll-behavior qiymatlari:

• auto: Standart xatti-harakat; aylantirish zanjiri sodir bo'ladi.
• contain: Ota-ona elementlariga aylantirish zanjirini oldini oladi.
• none: Barcha aylantirish zanjirlarini (shu jumladan yangilash imo-ishoralarini) oldini oladi.

Brauzer mosligi

Aylantirish tugashini aniqlashni amalga oshirishda brauzer mosligi muhim ahamiyatga ega.

• JavaScript aylantirish xususiyatlari: window.scrollY, document.documentElement.scrollTop, window.innerHeight va document.documentElement.scrollHeight zamonaviy brauzerlarda keng qo'llab-quvvatlanadi. Eski brauzerlar uchun sizga vendor prefikslari yoki polifillardan foydalanish kerak bo'lishi mumkin.
• Intersection Observer API: Intersection Observer API a'lo darajada brauzer qo'llab-quvvatlashiga ega, ammo eski brauzerlar (masalan, Internet Explorer) uchun polifilldan foydalanishingiz kerak bo'lishi mumkin. Siz polifillarni polyfill.io yoki npm'da topishingiz mumkin.
• overscroll-behavior: Bu xususiyat zamonaviy brauzerlarda yaxshi qo'llab-quvvatlanadi, ammo Internet Explorer'ning eski versiyalari uni qo'llab-quvvatlamaydi.

Har doim kodingizni turli brauzerlar va qurilmalarda sinchkovlik bilan sinab ko'ring, bu esa izchil va ishonchli foydalanuvchi tajribasini ta'minlaydi.

Amaliy misollar va qo'llash holatlari

1. JavaScript bilan cheksiz aylantirish

Bu misol foydalanuvchi sahifa oxiriga yetganda ko'proq kontent yuklash uchun JavaScript yordamida cheksiz aylantirishni qanday amalga oshirishni ko'rsatadi.

            <div id="content">
  <!-- Dastlabki kontent -->
</div>

<div id="loading" style="display: none;">Yuklanmoqda...
</div>

<script>
  const contentElement = document.getElementById('content');
  const loadingElement = document.getElementById('loading');
  let isLoading = false;
  let page = 1; // 1-sahifadan boshlash

  function loadMoreContent() {
    if (isLoading) return;
    isLoading = true;
    loadingElement.style.display = 'block';

    // API'dan kontent yuklashni simulyatsiya qilish
    setTimeout(() => {
      // Buni haqiqiy API chaqiruviga almashtiring
      const newContent = generateContent(page);
      contentElement.innerHTML += newContent;
      page++;
      isLoading = false;
      loadingElement.style.display = 'none';
    }, 1000); // API kechikishini simulyatsiya qilish
  }

  function generateContent(page) {
    let content = '';
    for (let i = 0; i < 10; i++) {
      content += `<p>Kontent elementi ${page * 10 + i + 1}</p>`;
    }
    return content;
  }

  window.addEventListener('scroll', function() {
    const scrollY = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollY + windowHeight >= documentHeight - 200) { // O'zgartirilgan chegara
      loadMoreContent();
    }
  });

  // Dastlabki yuklash
  loadMoreContent();
</script>

            

              
                Copy
              
            
          

Tushuntirish:

• Kod kontentni saqlash uchun content div'ini va ko'proq kontent yuklanayotganini ko'rsatish uchun loading div'ini belgilaydi.
• loadMoreContent funksiyasi API'dan kontent yuklashni simulyatsiya qiladi (siz buni haqiqiy API chaqiruvingiz bilan almashtirasiz).
• scroll hodisasi tinglovchisi foydalanuvchi sahifaning pastki qismiga yaqin aylantirganini tekshiradi (haqiqiy oxiridan biroz oldinroq yuklashni ishga tushirish uchun chegaradan foydalanib).
• Agar foydalanuvchi pastki qismga yaqin aylantirsa, ko'proq kontent yuklash uchun loadMoreContent funksiyasi chaqiriladi.
• isLoading bayrog'i bir vaqtning o'zida bir nechta kontent yuklash so'rovlari ishga tushishining oldini oladi.

2. Intersection Observer API bilan rasmlarni kechiktirib yuklash (Lazy Loading)

Bu misol sahifa yuklanish vaqtini yaxshilash uchun Intersection Observer API yordamida rasmlarni kechiktirib yuklashni qanday amalga oshirishni ko'rsatadi.

            <img data-src="image1.jpg" alt="Image 1" class="lazy-load">
<img data-src="image2.jpg" alt="Image 2" class="lazy-load">
<img data-src="image3.jpg" alt="Image 3" class="lazy-load">

<script>
  const lazyLoadImages = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.remove('lazy-load');
        observer.unobserve(img);
      }
    });
  });

  lazyLoadImages.forEach(img => {
    observer.observe(img);
  });
</script>

            

              
                Copy
              
            
          

Tushuntirish:

• HTML haqiqiy rasm URL manzilini saqlash uchun data-src atributidan foydalanadi. src atributi dastlab bo'sh.
• JavaScript lazy-load klassiga ega barcha rasmlarni tanlaydi.
• Intersection Observer har bir kechiktirib yuklanadigan rasmni kuzatadi.
• Rasm ko'rish oynasida ko'rinadigan bo'lganda, uning src atributi data-src atributining qiymatiga o'rnatiladi, bu esa rasmni yuklashni ishga tushiradi.
• lazy-load klassi olib tashlanadi va observer rasmni kuzatishni to'xtatadi.

3. JavaScript bilan aylantirish oxirida animatsiyalarni ishga tushirish

Bu misol foydalanuvchi sahifa oxiriga yetganda animatsiyani qanday ishga tushirishni ko'rsatadi.

            <div id="animated-element" style="opacity: 0; transition: opacity 1s ease-in-out;">
  <h2>Siz oxiriga yetdingiz!</h2>
  <p>O'qiganingiz uchun rahmat!</p>
</div>

<script>
  const animatedElement = document.getElementById('animated-element');

  window.addEventListener('scroll', function() {
    const scrollY = window.scrollY || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;

    if (scrollY + windowHeight >= documentHeight) {
      // Foydalanuvchi aylantirish oxiriga yetdi
      animatedElement.style.opacity = 1; // Elementni asta-sekin ko'rsatish
    }
  });
</script>

            

              
                Copy
              
            
          

Tushuntirish:

• HTML boshlang'ich shaffofligi 0 bo'lgan elementni va shaffoflik uchun CSS o'tishini (transition) belgilaydi.
• JavaScript scroll hodisasini tinglaydi.
• Foydalanuvchi aylantirish oxiriga yetganda, elementning shaffofligi 1 ga o'rnatiladi, bu esa asta-sekin paydo bo'lish animatsiyasini ishga tushiradi.

Aylantirish tugashini boshqarish bo'yicha eng yaxshi amaliyotlar

• Ishlash samaradorligini optimallashtiring: Ayniqsa, hisoblash jihatidan murakkab operatsiyalarni bajarayotganda, aylantirish hodisalarini boshqarish chastotasini cheklash uchun debouncing yoki throttling'dan foydalaning.
• Foydalanuvchiga fikr-mulohaza bildiring: Kontent yuklanayotganda yoki kontent oxiriga yetganda foydalanuvchiga xabar bering.
• Foydalanish imkoniyatlarini (Accessibility) hisobga oling: Aylantirish tugashini boshqarish mantig'ingiz foydalanish imkoniyatlariga salbiy ta'sir qilmasligiga ishonch hosil qiling. Masalan, cheksiz aylantirish ishlatilsa, kontentga kirishning muqobil usullarini taqdim eting.
• Sinchkovlik bilan sinab ko'ring: Izchil va ishonchli foydalanuvchi tajribasini ta'minlash uchun kodingizni turli brauzerlar, qurilmalar va ekran o'lchamlarida sinab ko'ring.
• Chegaradan foydalaning: JavaScript yordamida aylantirish oxirini aniqlashda, silliqroq foydalanuvchi tajribasini ta'minlash uchun chegaradan foydalanishni o'ylab ko'ring (masalan, ko'proq kontent yuklashni haqiqiy oxiridan biroz oldinroq ishga tushirish).
• Oqilona degradatsiya (Graceful Degradation): Agar siz Intersection Observer API'dan foydalanayotgan bo'lsangiz, uni qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira mexanizmini taqdim eting.

Xulosa

Aylantirish tugash hodisalarini aniqlash va boshqarish foydalanuvchi tajribasini yaxshilash va yanada qiziqarli veb-ilovalarni yaratish uchun kuchli usuldir. JavaScript, Intersection Observer API va overscroll-behavior kabi CSS usullaridan samarali foydalanib, siz cheksiz aylantirish, kechiktirib yuklash va dinamik animatsiyalar kabi xususiyatlarni amalga oshirishingiz mumkin. Barcha foydalanuvchilar uchun, ularning joylashuvi yoki qurilmasidan qat'i nazar, uzluksiz va inklyuziv tajribani ta'minlash uchun brauzer mosligini hisobga olishni, ishlash samaradorligini optimallashtirishni va foydalanish imkoniyatlariga ustuvorlik berishni unutmang.