CSS scroll-margin atribute

Pagsasaayos at Paggamit

scroll-margin Ang attribute ay tinatawag na layo sa pagitan ng posisyon na ito at konteyner.

Ito nangangahulugan na kapag napapatigil ang paggalaw, ang paggalaw ay mabilis na itataas at napapatigil sa layo na itinatalaga sa pagitan ng posisyon na ito at konteyner.

Ang posisyon ng magpapatupad ay ang posisyon ng anak na elemento sa loob ng konteyner kapag napapatigil ang paggalaw, na magiging maghahapunan sa posisyon na ito.

scroll-margin Ang attribute ay maikling paraan ng mga sumusunod na attribute:

scroll-margin Ang halaga ng attribute ay maaring itatalaga sa iba't ibang paraan:

Kung ang scroll-margin na attribute ay may apat na halaga:

scroll-margin: 15px 30px 60px 90px;
  • Ang layo sa itaas ay 15px
  • Ang layo sa kanan ay 30px
  • Ang layo sa ibaba ay 60px
  • Ang layo sa kaliwa ay 90px

Kung ang scroll-margin na attribute ay may tatlong halaga:

scroll-margin: 15px 30px 60px;
  • Ang layo sa itaas ay 15px
  • Ang layong pag-iimbak sa magkakasalungat na dako ay 30px
  • Ang layo sa ibaba ay 60px

Kung ang scroll-margin na attribute ay may dalawang halaga:

scroll-margin: 15px 30px;
  • Ang layong pag-iimbak sa itaas at ibaba ay 15px
  • Ang layong pag-iimbak sa magkakasalungat na dako ay 30px

Kung ang katangian ng scroll-margin ay may isang halaga:

scroll-margin: 10px;
  • Ang layong pag-iimbak sa apat na dako ay 10px

Upang makita, scroll-margin Katangian na may epekto, dapat itayo sa elemento ng anak ang scroll-margin at scroll-snap-align Katangian, at itayo sa elemento ng magulang ang scroll-snap-type Katangian.

Bilang:Sa mga sumusunod na halimbawa, ang layong pag-iimbak ay naitayo sa lahat ng gilid, ngunit dahil sa scroll-snap-align Ang katangian ay naitayo sa "start", kaya nagbago lamang ang layong pag-iimbak ng itaas sa paggalaw ng paggalaw.

Mga halimbawa

Halimbawa 1

Itayo ang layong pag-iimbak sa pagitan ng posisyon ng pag-aatras at ang container na 20px:

div {
  scroll-margin: 20px;
}

Subukan Ngayon

Halimbawa 2: Library ng larawan

scroll-margin Ang katangian ay maaaring gamitin sa library ng larawan na may pag-aatras ng paggalaw.scroll-margin Upang makikita ng user ang isa pang larawan sa kaliwa. Pagpasukin ang unang larawan ay makikita ang epekto:

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

Subukan Ngayon

Halimbawa 3: Itayo ang layong pag-iimbak sa ibaba at kanang bahagi

Maaaring itayo sa ibaba at kanang bahagi ng elemento. scroll-margin Katangian. Ang pagpalilipas ng horizontal at vertical na pag滚动 sa susunod na elemento ay makikita ang epekto:

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





Subukan Ngayon

CSS 语法

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

Halaga ng katangian

Halaga Paglalarawan
0 Ang layong pag-iimbak ay walang halaga. Default na halaga.
length

Tukuyin ang layong pag-iimbak sa px, pt, cm at iba pang mga yunit. Pinapayagan ang negatibong halaga.

Tingnan:Unit sa CSS.
initial I-set ang katangian sa kanyang default na halaga. Tingnan initial.
inherit Inheri ang katangian mula sa pangkapamilyang elemento. Tingnan inherit.

Detalye ng teknolohiya

Default na halaga: 0
Inherity: Hindi
Gawa ng animasyon: Hindi suportado. Maaari ring pag-aralan:Katangian ng animasyon.
Bersyon: CSS3
语法 sa JavaScript: object.style.scrollMargin="20px"

Suporta ng Browser

Ang numero sa talahanan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa katangian.

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Nakabatay na pahina

Tutukoy ng:CSS scroll-margin-bottom 属性

Tutukoy ng:CSS scroll-margin-left 属性

Tutukoy ng:CSS scroll-margin-right 属性

Tutukoy ng:CSS scroll-margin-top 属性

Tutukoy ng:CSS scroll-snap-align 属性

Tutukoy ng:CSS scroll-snap-type 属性