1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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>
|
