စီစ်အုပ် scroll-padding-inline-start အရေးပါသည်

定义和用法

scroll-padding-inline-start 属性指定了在行内方向上从容器起始位置到子元素吸附位置的距离。

这意味着，当你停止滚动时，滚动会快速调整并停止在吸附位置与容器之间指定的距离处。

行内方向是指下一字符相对于现有字符在行中的位置放置的方向，这也是具有 CSS display: inline; 的标签（如 和 标签）在文本中的布局方式。行内方向取决于书写语言，例如阿拉伯语的新字符是从右到左排列的，因此行内方向是从右到左的，而英文页面的行内方向是从左到右的。行内方向可以通过 CSS 属性 direction နှင့် writing-mode 定义。

吸附位置是指当你停止滚动时，子元素在容器中吸附到位的位置。

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

ကြုံရ scroll-padding-inline-start ဗဟိုအဆက်အလက်များ scroll-snap-align ဗဟိုအဆက်အလက်များ scroll-padding-inline-start နှင့် scroll-snap-type 属性。

实例

例子 1

设置从容器的起始位置到吸附位置在行内方向上的滚动内边距为 20px：

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

亲自试一试

例子 2：图片库

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

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

亲自试一试

例子 3

当容器元素的 writing-mode 属性值设置为 'vertical-rl' 时，行内方向上容器和子元素的起始位置从顶部移动到右侧。这会影响滚动吸附行为以及 scroll-padding-inline-start 属性的工作方式：

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

亲自试一试

例子 4

当容器元素的 direction 属性值设置为 'rtl' 时，行内方向上容器和子元素的起始位置从右侧移动到左侧，而容器和子元素的结束位置从右侧移动到底部。这会影响滚动吸附行为以及 scroll-padding-inline 属性的工作方式：

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认值。浏览器计算内边距。
length

以 px、pt、cm 等单位指定 scroll-padding-inline-start。

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

နည်းပါးစံ

မူးယစ်ဆိုင်ရာ: auto
ကူးကြောင်းသည်: မမှန်
လှည့်ပတ် ဖော်ထုတ်မှု: မမှန်မှုလှည့်ပတ် ဖော်ထုတ်ရာ အခြေအနေ.
ပုံစံ: CSS3
JavaScript ဘာသာစကား: object.style.scrollPaddingInlineStart="20px"

ဘာသာစကား ကူးကြောင်း

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

ခရမ်း အက်ဂျက် ဖလား စိတ်ပတ် တရားလို
69.0 79.0 68.0 15.0 56.0

相关页面

参考：စျူရှ် direction အခြေအနေ

参考：စီစ်အုပ် scroll-snap-align အရေးပါသည်

参考：စီစ်အုပ် scroll-snap-type အရေးပါသည်

参考：ပုံစံစကား writing-mode