စက်လုံး scroll-padding-left အကိုးအချုပ်

အချက်အရာ နှင့် အသုံးပြုပုံ

scroll-padding-left အချက်အရာ ကို အရွယ်အစား အကျယ်အဝန်း တစ် ခု မှ လျှပ်ပေး ရုံး အချက်အရာ အထိ အကွာ ကို အချက်အရာ ဖြင့် ချမှတ်ပါ။

လျှပ်ပေး ရုံး အချက်အရာ ကို လျှပ်ပေး ပြီး လျှပ်ပေး လှုပ်ရှား ပြီး ပြီးပြီးတော့ အရွယ်အစား အကျယ်အဝန်း တစ် ခု သို့ တက်ရောက် သည့် အချက်အရာ ဖြစ်သည်။

လျှပ်ပေး ရုံး အချက်အရာ scroll-snap-align အချက်အရာ သည် အသုံးပြု သော အချက်အရာ နှင့် မတူ သော်လည်း၊ အချက်အရာ သည် အသုံးပြု သော အချက်အရာ သို့ အကျိုးသက်ခြင်း ပါရှိနိုင်ပါသည်။ direction 和 writing-mode အချက်အရာ သည် အကျိုးသက်ခြင်း ပါရှိသည်။

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

要看到 scroll-padding-left 属性的效果，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-padding-left 和 scroll-snap-type 属性。

实例

例子 1

将滚动内边距设置为从容器左侧到吸附位置的距离为 20px：

div {
  scroll-padding-left: 20px;
}

ကျင်းပြီ

例子 2：图片库

scroll-padding-left 属性可用于具有吸附行为的图片画廊，以将图片从固定元素后面推入视图中：

#container > img {
  scroll-padding-left: 30px;
}

ကျင်းပြီ

အကြောင်း 3: အရှေ့ဘက် အကွက် အဘယ်သည် ကို ဖော်ပြပါ

နှစ် စလုံး အကိုင်းအချုပ် အဆို ကို အသုံးပြုလျှင် အကိုင်းအချုပ် ပေါ်မှ လည်း အကိုင်းအချုပ် အဆို ကို အသုံးပြုနိုင် scroll-padding-left အကိုင်းအချုပ် အရွယ် အတိုင်း ပြောင်းလဲစေရန် အကိုင်းအချုပ် သို့ လမ်းကြောင်း ပြောင်းလဲပါ။

#container > div {
  scroll-padding-left: 30px;
}

ကျင်းပြီ

အကြောင်း 4: အသင်း အရွယ်

ဖြစ်ပေါ်စေရန် scroll-padding-left အကိုင်းအချုပ် သည် အသုံးပြုစဉ် ဖြစ်ပါက အသင်း အကိုင်းအချုပ် သည် အသင်း အကိုင်းအချုပ် အရွယ် အရှေ့ဘက် သို့ အသုံးပြုပါ။ အဆိုပါ အခါ တွင်direction အကိုင်းအချုပ် အဆို 'rtl' သည် အသင်း အကိုင်းအချုပ် မှ အရွယ် အရှေ့ဘက် မှ အရွယ် အနောက်ဘက် သို့ ပြောင်းလဲစေသည်။ အဆိုပါ ဘွတ်ကုန်း ကို အသုံးပြုရာတွင်scroll-padding-left အကိုင်းအချုပ် သည် အမှုကြောင်း မပါ။

#container {
  direction: rtl;
  scroll-padding-left: 30px;
}
#container > div {
  scroll-snap-align: none start;
}

ကျင်းပြီ

CSS ဘွတ်ကုန်း

scroll-padding-left: auto|value|initial|inherit;

အကိုင်းအချုပ် အဆို

အဆို ဖော်ပြ
auto မူကြမ်း အဆို
length

px、pt、cm စသည် အတိုင်း scroll-padding-left ကို အဆိုပါ ဗဟိုမှုဒ် ကို အဆိုပါ ဗဟိုမှုဒ် ကို ဖော်ပြပါ။

ဝေးခေါ် အဆို မပါ။ ကျမ်းကို ကြည့်ပါ:CSS ပြက္ခဒိန်。
% အကွက် အကျယ် သည် အကွက် အရွယ် အတိုင်း အတွင်း အဘယ်သည် ကို အဘယ်သည် ကူးယူသည် ကို ဖော်ပြသည်。
initial အကိုင်းအချုပ် အဆို ကို ဖြည့်စွက်ပါ။ ကျမ်းကို ကြည့်ပါ: initial。
inherit ဖြစ်ပေါ်စေရန် အကိုင်းအချုပ် ကို မိဘ အကိုင်းအချုပ် မှ ကူးယူပါ။ ကျမ်းကို ကြည့်ပါ: inherit。

နည်းပါးစံ

မူကြမ်း အဆို auto
တိုက်ရိုက်: မမြင်
အနုတယ် ပြုလုပ်: မမြင်နိုင်။ ကျမ်းကို ကြည့်ပါ:အနုတယ် သတင်း。
ကြောင်း CSS3
JavaScript ဘွတ်ကုန်း object.style.scrollPaddingLeft="20px"

ဘွတ်ကုန်း ထောက်ပံ့

တခုခုသော အကိရိယာ သည် ထို အကိရိယာ ကို ပြည့်စုံအောင် ထောက်ပံ့သော ဘွတ်ကုန်း မှုဒ် ကို ကိုးကားသည် အချက်အလက်များ ကို ပြထားသည်。

ခရမ်း အန်ဂျီ ဖိုးက်စ် ဆာဖာ အိုပရာ
69.0 79.0 68.0 14.1 56.0

နေရာချိန်

ဂရုပ်ရွေးချက်:စက်တင်ကုဒ် လက်တွေ့အစိတ်အရောက်

ဂရုပ်ရွေးချက်:စက်လုံး scroll-snap-align အကိုးအချုပ်

ဂရုပ်ရွေးချက်:စက်လုံး scroll-snap-type အကိုးအချုပ်

ဂရုပ်ရွေးချက်:CSS အကြောင်းအရာ