diff options
Diffstat (limited to 'files/fr/web/css/scroll-snap-stop/index.md')
| -rw-r--r-- | files/fr/web/css/scroll-snap-stop/index.md | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/files/fr/web/css/scroll-snap-stop/index.md b/files/fr/web/css/scroll-snap-stop/index.md new file mode 100644 index 0000000000..68a536bdf0 --- /dev/null +++ b/files/fr/web/css/scroll-snap-stop/index.md @@ -0,0 +1,222 @@ +--- +title: scroll-snap-stop +slug: Web/CSS/scroll-snap-stop +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/scroll-snap-stop +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La propriété <strong><code>scroll-snap-stop</code></strong> définit la façon dont un conteneur de défilement peut « passer outre » certaines positions d'accroche.</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +scroll-snap-stop: normal; +scroll-snap-stop: always; + +/* Valeurs globales */ +scroll-snap-type: inherit; +scroll-snap-type: initial; +scroll-snap-type: unset; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Lorsque la zone d'affichage ({{Glossary("viewport")}}) du conteneur défile, elle peut passer sur certaines positions d'accroche.</dd> + <dt><code>always</code></dt> + <dd>Le conteneur de défilement ne peut pas passer sur une position d'accroche. Le conteneur doit « s'accrocher » dès la première position d'accroche de l'élément.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +{{csssyntax}} + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">/* setup */ +:root, body { + height: 100%; + display: flex; + align-items: center; + justify-content: space-between; + flex-flow: column nowrap; + font-family: monospace; +} +.container { + display: flex; + overflow: auto; + outline: 1px dashed lightgray; + flex: none; +} + +.container.x { + width: 100%; + height: 128px; + flex-flow: row nowrap; +} + +.container.y { + width: 256px; + height: 256px; + flex-flow: column nowrap; +} +/* definite scroll snap */ +.mandatory-scroll-snapping > div { + scroll-snap-stop: always; +} +.proximity-scroll-snapping > div { + scroll-snap-stop: normal; +} +/* scroll-snap */ +.x.mandatory-scroll-snapping { + scroll-snap-type: x mandatory; +} + +.y.mandatory-scroll-snapping { + scroll-snap-type: y mandatory; +} + +.x.proximity-scroll-snapping { + scroll-snap-type: x proximity; +} + +.y.proximity-scroll-snapping { + scroll-snap-type: y proximity; +} + +.container > div { + text-align: center; + scroll-snap-align: center; + flex: none; +} + +.x.container > div { + line-height: 128px; + font-size: 64px; + width: 100%; + height: 128px; +} + +.y.container > div { + line-height: 256px; + font-size: 128px; + width: 256px; + height: 256px; +} +/* appearance fixes */ +.y.container > div:first-child { + line-height: 1.3; + font-size: 64px; +} +/* coloration */ +.container > div:nth-child(even) { + background-color: #87EA87; +} + +.container > div:nth-child(odd) { + background-color: #87CCEA; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="container x mandatory-scroll-snapping" dir="ltr"> + <div>X Mand. LTR </div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="ltr"> + <div>X Proximity LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="ltr"> + <div>Y Mand. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="ltr"> + <div>Y Prox. LTR</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x mandatory-scroll-snapping" dir="rtl"> + <div>X Mandatory RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container x proximity-scroll-snapping" dir="rtl"> + <div>X Proximity RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y mandatory-scroll-snapping" dir="rtl"> + <div>Y Mand. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> + +<div class="container y proximity-scroll-snapping" dir="rtl"> + <div>Y Prox. RTL</div> + <div>2</div> + <div>3</div> + <div>4</div> + <div>5</div> +</div> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", "100%", "1630")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-stop", "scroll-snap-stop")}}</td> + <td>{{Spec2("CSS Scroll Snap Points")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("css.properties.scroll-snap-stop")}}</p> |