Scroll Anchoring

Web Development မှာ User Experience (UX) ကို အကြီးအကျယ် ဒုက္ခပေးတဲ့အရာတစ်ခုကတော့ Layout Instability (သို့မဟုတ်) Content Jumping ဖြစ်စဉ်ပါ။ စာဖတ်နေရင်းနဲ့ အပေါ်က ပုံတစ်ပုံ ပွင့်လာလို့ပဲဖြစ်ဖြစ်၊ ကြော်ငြာတစ်ခု တက်လာလို့ပဲဖြစ်ဖြစ် ကိုယ်ဖတ်နေတဲ့ စာကြောင်းက အောက်ကို ငိုက်ခနဲ ကျသွားတာမျိုး ကြုံဖူးကြမှာပါ။

ဒါကို ဖြေရှင်းပေးဖို့ Browser တွေမှာ ပါဝင်လာတဲ့ feature ကတော့ Scroll Anchoring ဖြစ်ပါတယ်။

---

Scroll Anchoring ဆိုတာ ဘာလဲ?

Scroll Anchoring ဆိုတာ User လက်ရှိ ကြည့်ရှုနေတဲ့ နေရာ (Viewport) ကို မပြောင်းလဲသွားအောင် Browser က နောက်ကွယ်ကနေ အလိုအလျောက် ထိန်းညှိပေးတဲ့ Mechanism တစ်ခုပါ။ အပေါ်ဘက်မှာရှိတဲ့ Element တွေရဲ့ အရွယ်အစား ပြောင်းလဲသွားရင်တောင် User ရဲ့ Scroll Position ကို လိုက်ညှိပေးပြီး စာဖတ်မပျက်အောင် ကူညီပေးပါတယ်။

---

သူက ဘယ်လို အလုပ်လုပ်သလဲ?

Browser က Viewport ထဲမှာရှိတဲ့ Element တစ်ခုကို "Anchor Node" အဖြစ် သတ်မှတ်လိုက်ပါတယ်။ အဲ့ဒီ Anchor Node ရဲ့ အပေါ်မှာ Content အသစ်တွေ ထပ်တိုးလာတာပဲဖြစ်ဖြစ်၊ အပေါ်က Element တစ်ခုက အရွယ်အစား ကြီးလာတာပဲဖြစ်ဖြစ် ဖြစ်လာရင် Browser က အဲ့ဒီ အပြောင်းအလဲ (Distance) ကို တွက်ချက်ပြီး Scroll Offset ကို ချက်ချင်း ပြင်လိုက်ပါတယ်။ ဒါကြောင့် User မျက်စိထဲမှာတော့ စာသားက ငြိမ်နေသလိုမျိုး ခံစားရမှာပါ။

---

CSS မှာ ဘယ်လို ထိန်းချုပ်မလဲ? (overflow-anchor)

Scroll Anchoring က Browser တော်တော်များများမှာ Default ပါဝင်ပြီးသား ဖြစ်ပါတယ်။ ဒါပေမဲ့ တချို့သော Layout တွေမှာ ဒီ feature ကြောင့် ကိုယ်ဖြစ်စေချင်တဲ့ ပုံစံမဟုတ်ဘဲ လွဲမှားတာမျိုး ရှိနိုင်ပါတယ်။ အဲ့ဒီအခါမှာ overflow-anchor property နဲ့ ထိန်းချုပ်နိုင်ပါတယ်။

၁။ overflow-anchor: auto; (Default)

Browser ကို Scroll anchoring လုပ်ခွင့် ပေးထားတာပါ။

၂။ overflow-anchor: none;

ဒီ feature ကို ပိတ်လိုက်တာပါ။ ဥပမာ- Infinite Scroll လုပ်တဲ့နေရာမှာ ဒါမှမဟုတ် Chat App တွေမှာ စာအသစ်တက်လာတိုင်း အောက်ကို အတင်းဆွဲချချင်တဲ့ အခြေအနေမျိုးမှာ ဒါကို သုံးပြီး ပိတ်ထားတတ်ကြပါတယ်။

.chat-window {
  overflow-anchor: none;
}

---

Scroll Anchoring ဘယ်အချိန်မှာ အလုပ်မလုပ်သလဲ? (Suppression Trigger)

Browser က အခြေအနေတချို့မှာ Scroll Anchoring ကို ခေတ္တရပ်တန့် (Suppress) လုပ်တတ်ပါတယ်။

• User ကိုယ်တိုင် Scroll ဘီးကို လှည့်နေတဲ့အချိန်။

• JavaScript နဲ့ window.scrollTo() သုံးပြီး Scroll ရွှေ့နေချိန်။

• position: fixed သို့မဟုတ် position: absolute ဖြစ်နေတဲ့ element တွေ ပြောင်းလဲချိန်။

• Anchor node အဖြစ် သတ်မှတ်ထားတဲ့ Element က Viewport အပြင် ရောက်သွားချိန်။

---

အနှစ်ချုပ်

Scroll Anchoring ဟာ ခေတ်သစ် Web မှာ User တွေ စိတ်မနှောင့်ယှက်ရအောင် Layout Shift တွေကို ကာကွယ်ပေးတဲ့ အရေးကြီးတဲ့ Feature တစ်ခုပါ။ အထူးသဖြင့် ပုံတွေ အများကြီးပါတဲ့ Article တွေနဲ့ Ads ပါတဲ့ Website တွေအတွက် မရှိမဖြစ်ပါပဲ။