CSS - scrollbar-gutter Property

Previous
Quiz

CSS scrollbar-gutter property allows developers to create a fixed space for the scrollbar.

Possible Values

  • auto − Default value. The browser will automatically create a gutter if a scrollbar is needed.

  • stable − The browser will always reserve space for the scrollbar, even if it is not needed.

  • both-edges − The browser reserves the space for a scrollbar on both the inline start and end edges of the element.

Applies to

Scrolling boxes.

DOM Syntax

 object.style.scrollbarGutter: "auto|stable|both-edges";

CSS Scrollbar Gutter - Auto Value

The following example demonstrates how to use scrollbar-gutter: auto property to create an element with a scrollbar that will only appear if the content of the element overflows its container −

 <html> <head> <style> .scroll-gutter-auto { margin: 10px; width: 300px; height: 190px; overflow: auto; scrollbar-gutter: auto; background-color: #F1EFB0; } h3 { color: #DC4299; } </style> </head> <body> <div class="scroll-gutter-auto"> <h3>overflow: auto and scrollbar-gutter: auto</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html>

CSS Scrollbar Gutter - Stable Value

The following example demonstrates how to use the scrollbar-gutter: stable to make a scrollbar always visible, even if the content fits in the container −

 <html> <head> <style> .scroll-gutter-scroll { margin: 10px; width: 350px; height: 210px; overflow: scroll; scrollbar-gutter: stable; background-color: #F1EFB0; } h3 { color: #DC4299; } </style> </head> <body> <div class="scroll-gutter-scroll"> <h3>overflow: scroll and scrollbar-gutter: stable</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text. </div> </body> </html>

The following example demonstrates how to use the scrollbar-gutter: stable to hide any content that goes beyond the edges of a container, while still keeping a space for a scrollbar −

 <html> <head> <style> .scroll-gutter-hidden { margin: 10px; width: 350px; height: 150px; overflow: hidden; scrollbar-gutter: stable; background-color: #F1EFB0; } h3 { color: #DC4299; } </style> </head> <body> <div class="scroll-gutter-hidden"> <h3>overflow: hidden and scrollbar-gutter: stable</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. Lorem Ipsum is simply dummy text of the printing and typesetting industry dummy text ever since the 1500s. </div> </body> </html>

CSS Scrollbar Gutter - Both-edges Value

The following example demonstrates how to use the CSS property scrollbar-gutter: stable both-edges to make a scrollbar always visible at both the edges, even if the content of the element fits within its container −

 <html> <head> <style> .scroll-gutter-both-edges { margin: 10px; width: 370px; height: 220px; overflow: scroll; scrollbar-gutter: stable both-edges; background-color: #F1EFB0; } h3 { color: #DC4299; } </style> </head> <body> <div class="scroll-gutter-both-edges"> <h3>overflow: hidden and scrollbar-gutter: stable both-edges</h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type. </div> </body> </html>
Print Page
Previous
Next
Advertisements