Scroll-Container

Ein Scroll-Container ist eine Elementbox, deren Inhalt gescrollt werden kann, unabhängig davon, ob Scrollleisten vorhanden sind. Eine Elementbox wird zum Scroll-Container, wenn ihre Eigenschaft overflow (oder overflow-x oder overflow-y) auf scroll, auto oder hidden gesetzt ist.

Der jeweilige overflow-Wert eines Scroll-Containers bestimmt, wann Scrollleisten angezeigt werden:

• scroll: Scrollleisten werden immer angezeigt, sofern die Plattform sie darstellt.
• auto: Scrollleisten werden nur angezeigt, wenn der Inhalt über die Box hinausragt.
• hidden: Es werden keine Scrollleisten angezeigt, und Benutzer können den Inhalt nicht direkt scrollen. Er kann jedoch weiterhin programmgesteuert gescrollt werden, beispielsweise mit Element.scrollTo() oder indem ein darin enthaltenes Element den Fokus erhält.

Ein Scroll-Container:

• Erzeugt immer einen neuen Blockformatierungskontext. Dadurch umfasst er Floats, und seine Außenabstände fallen nicht mit den Außenabständen seiner Kindelemente zusammen.
• Dient als Referenzbox für Nachfahren, deren position auf sticky gesetzt ist.
• Hat als Flex- oder Grid-Element eine automatische Mindestgröße von 0 und kann daher kleiner als sein Inhalt werden.