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


Die Eigenschaft scroll-behavior CSS spezifiziert das Scroll-Verhalten für ein Scroll-Box, wenn scrolling von der Navigation oder CSSOM Apis ausgelöst wird
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;

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

Jedes scrollen, welches vom User durchgeführt wird, ist nicht betroffen von dieser Eigenschaft. Wenn diese Eigenschaft im Root-Element spezifiert wurde, betrifft es stattdessen den Viewport

User agents ist es erlaubt diese Eigenschaft zu ignorieren.

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

Syntax

The scroll-behavior property is specified as one of the keyword values listed below.
Die Eigenschaft scroll-behavior  wird durch die Werte, die unten aufgeführt sind, spezifiert.

Values

auto
Die scrolling Box scrollt sofort.
smooth
The scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. User agents should follow platform conventions, if any.
 

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 AndroidiOS SafariSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 61
Deaktiviert
Vollständige Unterstützung 61
Deaktiviert
Deaktiviert From version 61: this feature is behind the Enable experimental web platform features preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.
Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 36IE Keine Unterstützung NeinOpera Vollständige Unterstützung Ja
Deaktiviert
Vollständige Unterstützung Ja
Deaktiviert
Deaktiviert This feature is behind the Smooth Scrolling preference (needs to be set to true).
Safari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android ? Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 36Opera Android Keine Unterstützung NeinSafari 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
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: Goldfischpeter
Zuletzt aktualisiert von: Goldfischpeter,