CSS - scrollbar-gutter Property

Previous
Quiz
Next

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