Mafuta ya CSS scroll-margin

Definition and Usage

scroll-margin The attribute specifies the distance between the snap position and the container.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the snap position and the container.

Snap position refers to the position where the child element is吸附到位 in the container when the scrolling stops.

scroll-margin The attribute is a shorthand attribute of the following attributes:

scroll-margin The value of the attribute can be set in different ways:

If the scroll-margin attribute has four values:

scroll-margin: 15px 30px 60px 90px;
  • Top distance is 15px
  • Right distance is 30px
  • Bottom distance is 60px
  • Left distance is 90px

If the scroll-margin attribute has three values:

scroll-margin: 15px 30px 60px;
  • Top distance is 15px
  • 左右两侧距离为 30px
  • Bottom distance is 60px

If the scroll-margin attribute has two values:

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 Tabia inaonesha "start", kwa hivyo kina kwenye juu inachangia kwenye kushona kwenye kina.

Mifano

Mafanikio 1

Kusimamia kufikia kwenye mabara ya kimaumini ya kina na kushona kwenye kina kwa 20px:

div {
  scroll-margin: 20px;
}

Tukijifunza tena

Mafanikio 2: Maktaba ya picha

scroll-margin Tabia inaweza kutumiwa kwenye maktaba ya picha yenye hali ya kushona. Hapa,scroll-margin Kuweza kuonesha kwa mtumiaji kwamba kuna picha zaidi kwenye kina kwanza. Kusoma kwenye picha ya kwanza inaonesha mafanikio:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Babingam Mwizi Wuhan Tulip Hangzhou

Tukijifunza tena

Mafanikio 3: Kusimamia kwenye mabara ya kimaumini ya mawaka na kushona kwenye kina

Inaweza kusimamia kwenye mabara ya kimaumini ya eneo la mawaka na kushona kwenye kina. Mafanikio: scroll-margin Tabia. Kupitia kusoma kwenye kina kwenye juu na kushona kwenye juu inaonesha mafanikio:

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





Tukijifunza tena

Inayotumiwa kwa Ki-CSS

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

Thamani ya tabia

Thamani Maelezo
0 Kumaliza kufikia kwenye juu ya eneo la uharibifu ni thamani ya kuzingatia. Chaguo cha kuzingatia.
length

Kumaliza kufikia kwenye juu ya eneo la uharibifu kwa px, pt, cm na hivi ya kuzingatia. Inafaa kutumia thamani ya zaidi ya kifupi.

Tazama:Matumizi ya Mafanikio ya CSS ya Hifadhi.
initial Kumaliza tabia hii kwa chaguo cha kuzingatia. Tazama: initial.
inherit Kumaliza tabia hii kwa kutumia tabia ya kina yake. Tazama: inherit.

Mifano ya viwango

Chaguo cha kuzingatia: 0
Kuzikamilika: Hakuna
Hali ya huzuni: Hakupewa. Tazama:Mafanikio ya hali ya huzuni.
Versioni: CSS3
Inayotumiwa kwa Ki-JavaScript: object.style.scrollMargin="20px"

Mfano wa kufungua kwenye kifungu

Mafanikio ya tabia hizi ni versioni za kwanza zilizo kufaa kwa kufungua tabia hii.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Pembenani

Tunzi:Hisia ya scroll-margin-bottom kwa CSS

Tunzi:Hisia ya scroll-margin-left kwa CSS

Tunzi:Hisia ya scroll-margin-right kwa CSS

Tunzi:Hisia ya scroll-margin-top kwa CSS

Tunzi:Hisia ya scroll-snap-align kwa CSS

Tunzi:Hisia ya scroll-snap-type kwa CSS