diff options
Diffstat (limited to 'files/de/web/css/scroll-behavior/index.html')
| -rw-r--r-- | files/de/web/css/scroll-behavior/index.html | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/files/de/web/css/scroll-behavior/index.html b/files/de/web/css/scroll-behavior/index.html new file mode 100644 index 0000000000..9505393d2a --- /dev/null +++ b/files/de/web/css/scroll-behavior/index.html @@ -0,0 +1,143 @@ +--- +title: scroll-behavior +slug: Web/CSS/scroll-behavior +translation_of: Web/CSS/scroll-behavior +--- +<div>{{ CSSRef }}<br> +Die <strong><code>scroll-behavior</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.</div> + +<div>{{cssinfo}}</div> + +<div></div> + +<div> +<div> +<div>{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}</div> + +<p class="hidden">Der Quellcode für dieses interaktive Beispiel liegt in einem GitHub-Repository. Falls du zu dem interactive examples Projekt beitragen möchtest, klone bitte <a class="tgwf_grey" href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und schick uns einen Pull Request.</p> +</div> +</div> + +<div>Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das <code>body</code>-Element spezifiziert, wird es <em>nicht</em> an den Viewport weitergegeben.</div> + +<div></div> + +<div>User Agents dürfen diese Eigenschaft ignorieren.</div> + +<hr> +<div> +<h2 id="Syntax" name="Syntax">Syntax</h2> +</div> + +<pre class="brush:css no-line-numbers">/* Keyword values */ +scroll-behavior: auto; +scroll-behavior: smooth; + +/* Global values */ +scroll-behavior: inherit; +scroll-behavior: initial; +scroll-behavior: unset; +</pre> + +<p>Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.<br> + Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.<br> + Wird die Eigenschaft dem <code>body</code> zugeordnet, wrikt sie sich hingegen <em>nicht</em> auf den Viewport aus.<br> + <br> + Ein User Agent kann diese Eigenschaft auch ignorieren.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<p>Die Eigenschaft <code>scroll-behavior</code> kann dabei folgende Werte annehmen:</p> + +<h3 class="brush:css" id="Werte">Werte</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Die scrolling Box scrollt sofort.</dd> + <dt><code>smooth</code></dt> + <dd>Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.<br> + Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.</dd> +</dl> + +<h3 id="Formelle_Syntax">Formelle Syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Beispiel</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><nav> + <a href="#page-1">1</a> + <a href="#page-2">2</a> + <a href="#page-3">3</a> +</nav> +<scroll-container> + <scroll-page id="page-1">1</scroll-page> + <scroll-page id="page-2">2</scroll-page> + <scroll-page id="page-3">3</scroll-page> +</scroll-container></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">a { + display: inline-block; + width: 50px; + text-decoration: none; +} +nav, scroll-container { + display: block; + margin: 0 auto; + text-align: center; +} +nav { + width: 339px; + padding: 5px; + border: 1px solid black; +} +scroll-container { + display: block; + width: 350px; + height: 200px; + overflow-y: scroll; + scroll-behavior: smooth; +} +scroll-page { + display: flex; + align-items: center; + justify-content: center; + height: 100%; + font-size: 5em; +} +</pre> + +<h3 id="Ergebnis">Ergebnis</h3> + +<p>{{ EmbedLiveSample("Example", "100%", 250) }}</p> + +<h2 id="Specifications" name="Specifications">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("css.properties.scroll-behavior")}}</p> |