Visibility နဲ့ပတ်သက်ပြီး ကောင်းမွန်စွာကိုင်တွယ်နိုင်တဲ့ isInViewpoint Function 🧑‍💻

=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°=°

Web Development ပိုင်း မှာ visibility နဲ့ပတ်သက်တဲ့ element တွေကို ကိုင်တွယ်နိုင်ဖို့ function လေးနဲ့မိတ်ဆက်ပေးပါရစေ။

isInViewPort function ကို များသောအားဖြင့် lazy loading, infinite scroll, animation လုပ်တဲ့နေရာတေွမှာ အသုံးဝင်တဲ့ function လေးဖြစ်ပါတယ်.

function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight  document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth  document.documentElement.clientWidth)
  );
}

// Usage
const element = document.querySelector('#myElement');
if (isInViewport(element)) {
  console.log('Element is in viewport');
}

Code example မှာဆိုရင် ပထမဆုံး isInViewpoint Function ‌ကနေပြီးတော့ <div> <img> စတဲ့ element တစ်ခုကို select လုပ်ပါတယ်။

ပြီးရင်တော့ const rect = element.getBoundingClientRect(); ဆိုတဲ့ line လေးကနေတစ်ဆင့် html web page မှာရှိတဲ့ 
element ရဲ့ position ကို ယူပြီး rect လို့ခေါ်တဲ့ variable ထဲမှာသိမ်းပေးထားပါတယ်။ 

ဒီ function ရဲ့အရေးအကြီးဆုံးအပိုင်းအနေနဲ့ကတော့ rect object ရဲ့ properties ကိုအသုံးပြုပြီး condition (4) ခု စစ်ပေးပါတယ်။ element ကိုမြင်ရတယ်ဆိုရင် true လို့ return ပြန်ပေးပြီး မမြင်ရဘူးဆိုရင်တော့ false ကို return ပြန်ပေးပါတယ်။

👉rect.top >= 0
ဒါကတော့ element ရဲ့ထိပ်ပိုင်းက viewpoint ရဲ့ ထိပ်ဆုံးမှာရောက်နေလားဆိုတာကို စစ်တာပါ။

👉rect.left >= 0

ဒါကတော့ element ရဲ့ ဘယ်ဘက်ခြမ်းက viewpoint ရဲ့ ဘယ်ဘက်ခြမ်းမှာ ရောက်နေလားဆိုတာကိုစစ်တာပါ

👉rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
ကတော့ element ရဲ့အောက်ခြေအတိုင်းအတာက viewpoint ရဲ့ height အတွင်းမှာ ၀င်နေလားဆိုတာစစ်တာပဲဖြစ်ပါတယ်။

👉rect.right <= (window.innerWidth || document.documentElement.clientWidth)

ဒါကလည်း bottom check နဲ့အလုပ်လုပ်တဲ့ပုံစံတူပါတယ်။ element ရဲ့ညာဘက်ခြမ်းက viewpoint ရဲ့အကျယ်အတွင်းမှာရှိနေလားဆိုတာစစ်ပေးတာပါ။

ဒီနည်းလမ်းလေးက web page တွေမှာ element တစ်ခုကို screen အတွင်းမှာ သေချာမြင်ရလားဆိုတာကို စစ်ဆေးပေးနိုင်တဲ့ အရိုးရှင်းဆုံးနည်းလမ်းလေးပဲဖြစ်ပါတယ်။ 

Creative Coder ရဲ့ အတန်းတွေအကြောင်း၊ စဉ်ဆက်မပြတ်တင်ဆက်ပေးနေတဲ့ web development နဲ့ပတ်သက်တဲ့ knowledge sharing တွေအကြောင်း အချိန်နဲ့ တစ်ပြေးညီသိရှိနိုင်ဖို့ Telegram နဲ့ TikTok မှာ Creative Coder ရှိနေပါပြီ။

Tips and Tricks တွေကို ‌sharing လုပ်ပေးနေတာဖြစ်လို့ follow ထားပြီးစောင့်ကြည့်ကြဖို့လည်း မမေ့နဲ့နော် 👀

Tiktok
https://www.tiktok.com/@creativecodermm?_t=8mufG7lMQiY&_r=1


Telegram 
https://t.me/creativecodermm


Youtube
https://youtube.com/c/CreativeCoderMyanmar


Linkedin
https://www.linkedin.com/company/creative-coder-myanmar/


Facebook
https://www.facebook.com/creativecodermm


CreativeCoder Learning Platform
http://creativecodermm.com


#creative_coder_myanmar