CSS scroll-margin-top 属性

定义和用法

scroll-margin-top Katangian na tinukoy ang distansya sa pagitan ng posisyon ng pagsusuka at ng container.

Ang posisyon ng pagsusuka ay ang posisyon na nakabitin ng child element sa loob ng container nang ito ay hindi na inililipat. Ang posisyon ng pagsusuka ay tinukoy sa pamamagitan ng scroll-snap-align Katangian na itinakda, ngunit maaaring maapektuhan din ng mga katangian ng CSS tulad ng direction at writing-mode ng epekto.

Bilinan:Ang katangian na ito lamang ay epektibo kapag ang posisyon ng pagsusuka ay itakda sa itaas ng child element.

Upang makita scroll-margin-top Katangian, dapat na itakda sa child element ang scroll-margin-top at scroll-snap-align Katangian, at itakda sa magulang na elemento ang scroll-snap-type Katangian.

Halimbawa

Halimbawa 1

Itakda ang scrollMarginTop na nasa itaas ng container bilang 20px:

div {
  scroll-margin-top: 20px;
}

Subukan Ngayon

Halimbawa 2: Library ng Larawan

scroll-margin-top Ang katangian ay maaring gamitin sa gallery ng larawan na may pagsusuka. Dito,scroll-margin-top Ipakilala sa gumagamit na mayroon pang isang larawan sa itaas. I-scroll ang unang larawan upang makita ang epekto:

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

Subukan Ngayon

Halimbawa 3: Posisyon ng Pagsusuka

Upang gumawa ng scroll-margin-top Ang katangian ay magiging epektibo, at ang posisyon ng pagsusuka ay dapat na itakda sa itaas ng child element. Sa kasalukuyang halimbawa,writing-mode Ang katangian ay magbabago ng posisyon ng pagsusuka mula sa itaas ng child element sa kanang bahagi. Sa pamamagitan ng ganitong code,scroll-margin-top Ang katangian ay hindi na magiging epektibo:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-top: 30px;
  scroll-snap-align: start none;
}

Subukan Ngayon

Grammar ng CSS

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

Halaga ng Katangian

Detalye ng Teknolohiya

Suporta ng Browser

Ang mga numero sa talahanayan ay nangangahulugan na ang unang bersyon ng browser na ganap na sumusuporta sa katangian.

相关页面

参考：CSS direction 属性

参考：CSS scroll-snap-align 属性

参考：CSS scroll-snap-type 属性

参考：CSS writing-mode 属性