စက်ပွဲလက်ပွဲတန်း scroll-padding-inline-end သုံးသပ်

ဖော်ပြခြင်း နှင့် အသုံးပြုခြင်း

scroll-padding-inline-end အဆိုပါ အရာ သည် အကွက် နှင့် အသုံးပြုထားသည်။

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

အဆိုပါ အရာ သည် လက်ရှိ အစိတ် အတွင်း လက်ရှိ အစိတ် နှင့် ဆက်သွယ်ထားသော အစိတ် ကို လက်ရှိ အစိတ် နှင့် ဆက်သွယ်ထားသည်။ အဆိုပါ အရာ သည် လက်ရှိ အစိတ် နှင့် ဆက်သွယ်ထားသည်။ direction 和 writing-mode ဒါ့ကို ဖော်ပြထားသည်。

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

မှတ်ချက်:ဒါ့အပြင် ထို အရာ သာ အသုံးပြုသည်。 scroll-snap-align ပြင်းထန်သော အရာများ ကို 'end' အထိပ်ကို ဆက်သွယ်ထား ဖြစ် သော်လည်း အသုံးပြုသည်。

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

实例

例子 1

设置从容器末端到对齐位置的行内方向滚动内边距为 20px：

div {
  scroll-padding-inline-end: 20px;
}

ကျွန်ုပ် ကိုယ်တိုင် ကျင်းပပါ

例子 2：图片库

scroll-padding-inline-end 属性可以在具有对齐行为的图片画廊中使用，以将图片从固定元素后面推出：

#container {
  scroll-padding-inline-end: 30px;
}

ကျွန်ုပ် ကိုယ်တိုင် ကျင်းပပါ

အမှတ် 3

အကွင်းအခြေအား အရ writing-mode အချက်အလက် အရ အရွယ် ပြောင်းလဲခြင်း ဖြစ်ပါသည်။ ဤ အခြေအား ကို ကျင်းပပါ: scroll-padding-inline-end အခြေအား အလုပ်ခြုံ့

#container {
  scroll-padding-inline-end: 20px;
  writing-mode: vertical-rl;
}

ကျွန်ုပ် ကိုယ်တိုင် ကျင်းပပါ

အမှတ် 4

အကွင်းအခြေအား အရ direction အချက်အလက် အရ အရွယ် ပြောင်းလဲခြင်း ဖြစ်ပါသည်။ ဤ အခြေအား ကို ကျင်းပပါ: scroll-padding-inline-end အခြေအား အလုပ်ခြုံ့

#container {
  scroll-padding-inline-end: 20px;
  direction: rtl;
}

ကျွန်ုပ် ကိုယ်တိုင် ကျင်းပပါ

ဆင်ဖြူ အရုံး

scroll-padding-inline-end: auto|value|initial|inherit;

အချက်အလက် အရ

နည်းပါး အချက်

ဘာသာပြန် ကူညီ

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

နိုင်ငံခြား စာမျက်နှာ

ကိုးကားချက်စက်တင်ဆိပ်စာ direction အခြေအနေ

ကိုးကားချက်စက်ပွဲလက်ပွဲတန်း scroll-snap-align သုံးသပ်

ကိုးကားချက်စက်ပွဲလက်ပွဲတန်း scroll-snap-type သုံးသပ်

ကိုးကားချက်CSS အာရုံစိုက်ထားရာ