Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.


Die Eigenschaft scroll-behavior CSS spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.
 
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

/* Global values */
scroll-behavior: inherit;
scroll-behavior: initial;
scroll-behavior: unset;

Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.
Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.
Wird die Eigenschaft dem body zugeordnet, wrikt sie sich hingegen nicht auf den Viewport aus.

Ein User Agent kann diese Eigenschaft auch ignorieren.

Initialwertauto
Anwendbar aufscrollende Boxen
VererbtNein
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Die Eigenschaft scroll-behavior kann dabei folgende Werte annehmen:

Values

auto
Die scrolling Box scrollt sofort.
smooth
Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.
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.

Formal syntax

auto | smooth

Example

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>

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;
}

Result

Specifications

Specification Status Comment
CSS Object Model (CSSOM) View Module
Die Definition von 'scroll-behavior' in dieser Spezifikation.
Arbeitsentwurf Initial specification

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
scroll-behaviorChrome Vollständige Unterstützung 61Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 36IE Keine Unterstützung NeinOpera Vollständige Unterstützung 48Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 61Chrome Android Vollständige Unterstützung 61Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 36Opera Android Vollständige Unterstützung 45Safari iOS Keine Unterstützung NeinSamsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: diverent2, mdnwebdocs-bot, Goldfischpeter
Zuletzt aktualisiert von: diverent2,