အခန်းခံအစီအစဥ်

CSS အစီရင်ခံ စာအုပ်

စတွဲပြည့် အကျုံး

အရည်ချင်း သင်္ကေတ

အထူး ကျွန်ုပ် အကြောင်း -

CodeW3C.com ဗဟုသုတ်များ

စီစဥ်ခြင်း scroll-margin အကိုးအချုပ်

ပြီးခဲ့သော ကွက် scroll-behavior
ထပ်ကွက် scroll-margin-block

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

scroll-margin အကွာအဝေး သည် တိုက်ရိုက် နေသော တည်နေရာ နှင့် အရင်းတည်ရာ အကွာအဝေး ဖြစ်သည်။

ထို့ကြောင့် သင် တွေ့ဆုံသော အချိန်တွင် တိုက်ရိုက် သွားသော အရင်းတည်ရာ နှင့် အကွာအဝေး ဖြစ်သော အချိန်တွင် အချိန်မှန် ရှိသည် -

တိုက်ရိုက် နေသော တည်နေရာ သည် အရင်းတည်ရာ အကွာအဝေး တွင် ရှိသော အကွာအဝေး ဖြစ်သည်။

scroll-margin သည် အောက်ပါ အကိုးအကား ကို ရိုးရိုးစဉ် အကိုးအကား ဖြင့် အသုံးပြုသည် -

scroll-margin သဘောတူ သည် မတူညီသော နည်းလမ်းဖြင့် အစားထိုးနိုင်ပါသည် -

တစ်ခုခု scroll-margin သည် လေး အတိုင်း ရှိသော်လည်း -

scroll-margin: 15px 30px 60px 90px;

အပေါ်ဘက် အကွာ 15px
ဆိုင်းခြေ အကွာ 30px
အောက်ဘက် အကွာ 60px
ဆိုင်းဘက် အကွာ 90px

တစ်ခုခု scroll-margin သည် သုံး အတိုင်း ရှိသော်လည်း -

scroll-margin: 15px 30px 60px;

အပေါ်ဘက် အကွာ 15px
左右两侧距离为 30px
အောက်ဘက် အကွာ 60px

တစ်ခုခု scroll-margin သည် နှစ် အတိုင်း ရှိသော်လည်း -

scroll-margin: 15px 30px;

顶部和底部距离为 15px
左右两侧距离为 30px

如果 scroll-margin 属性有一个值：

scroll-margin: 10px;

四个方向的距离均为 10px

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

注意：在下面的例子中，为所有边设置了滚动外边距，但由于 scroll-snap-align 属性设置为 "start"，因此只有顶部的滚动外边距改变了滚动行为。

实例

例子 1

设置吸附位置与容器之间的滚动外边距为 20px：

div {
  scroll-margin: 20px;
}

亲自试一试

例子 2：图片库

scroll-margin 属性可以用在具有吸附行为的图片库中。在这里，scroll-margin 让用户可以看到左侧还有一张图片。滚动过第一张图片可查看效果：

#container > img {
  scroll-margin: 0 0 0 30px;
}

亲自试一试

例子 3：设置底部和右侧的滚动外边距

可以在元素的底部和右侧设置 scroll-margin 属性。水平和垂直滚动到下一个元素可查看效果：

#container > div {
  scroll-margin: 0 10px 30px 0;
}

亲自试一试

CSS 语法

scroll-margin: 0|value|initial|inherit;

属性值

值	描述
0	滚动外边距为零。默认值。
length	指定以 px、pt、cm 等为单位的滚动外边距。允许使用负值。请参阅：CSS အဆိုပါ ဗဟိုကွက်。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

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

မူကြမ်း သတ်မှတ်ခြင်း：	0
တိုက်ရိုက်မျှောက်လုပ်ခြင်း：	ထိပ်သို့ မရှိ
အယူအဆ ပြုလုပ်ခြင်း：	ထောက်ပံ့ခြင်း မရှိပါ၊ ကိုးကားချက်ကို ကျွန်ုပ်ထားသည့် အချက်အလက်များ ကို ကျွန်ုပ်ထားသည့် အချက်အလက်များအယူအဆ ပတ်သက်တဲ့ ဗီယက်ပယ်အခြေအနေ。
ပုံစံ：	CSS3
JavaScript ပုံစံ：	object.style.scrollMargin="20px"

ဘွတ်ပယ် ထောက်ပံ့

အခြေအနေအရ အမှတ်များ ဟာ ထို အကျုံးဝင် ဗီယက်ပယ်အား အဆိုပါ ဗီယက်ပယ်အခြေအနေ ကို ပထမဆုံး ထောက်ပံ့ပေးသော ဘွတ်ပိုင်း အဆိုပါ ဗီယက်ပယ် အဆိုပါ ဗီယက်ပယ် အဆိုပါ အခြေအနေ ကို ကိုးကားချက်