[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/scroll-margin-block [Back]  [Original]

Proprit CSS scroll-margin-block - CSS | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Proprit CSS scroll-margin-block

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2021.

La proprit raccourcie CSS scroll-margin-block dfinit les marges de dfilement d'un lment dans la dimension de bloc.

Dans cet article

Exemple interactif

scroll-margin-block: 0;
scroll-margin-block: 20px;
scroll-margin-block: 2em;
<section class="default-example" id="default-example">
  <div class="scroller">
    <div>1</div>
    <div id="example-element">2</div>
    <div>3</div>
  </div>
  <div class="info">Dfiler </div>
</section>
.default-example .info {
  inline-size: 100%;
  padding: 0.5em 0;
  font-size: 90%;
  writing-mode: vertical-rl;
}

.scroller {
  text-align: left;
  height: 250px;
  width: 270px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid black;
  scroll-snap-type: y mandatory;
}

.scroller > div {
  flex: 0 0 250px;
  background-color: rebeccapurple;
  color: white;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
}

.scroller > div:nth-child(even) {
  background-color: white;
  color: rebeccapurple;
}

Proprits constitutives

Cette proprit est une proprit raccourcie pour les proprits CSS suivantes :

Syntaxe

css
/* Valeurs de type <length> */
scroll-margin-block: 10px;
scroll-margin-block: 1em 0.5em;

/* Valeurs globales */
scroll-margin-block: inherit;
scroll-margin-block: initial;
scroll-margin-block: revert;
scroll-margin-block: revert-layer;
scroll-margin-block: unset;

Valeurs

<length>

Un dcalage par rapport au bord correspondant du conteneur de dfilement.

Description

Les valeurs de scroll-margin reprsentent des dcalages dfinissant la zone de capture de dfilement utilise pour accrocher cette bote au port d'accrochage. La zone de capture de dfilement est dtermine en prenant la bote de bordure transforme, en trouvant sa bote englobante rectangulaire (aligne sur les axes dans l'espace de coordonnes du conteneur de dfilement), puis en ajoutant les dcalages dfinis.

Dfinition formelle

Valeur initialepour chaque proprit individuelle de la proprit raccourcie :
Applicabilittous les lments
Hritenon
Valeur calculepour chaque proprit individuelle de la proprit raccourcie :
Type d'animationpar type de valeur calcule

Syntaxe formelle

scroll-margin-block = 
<length>{1,2}
Cette syntaxe reflte le dernier standard selon CSS Scroll Snap Module Level 1. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Spcifications

Spcification
CSS Scroll Snap Module Level 1
# propdef-scroll-margin-block

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page