<div class="no-support">
  <p>Heads up: It doesn't look like your browser supports <code>scrollbar-width</code>! Check <a href="https://caniuse.com/#feat=css-scrollbar">Can I use</a> for current browser support. Maybe try opening this CodePen in a different browser that supports <code>scrollbar-width</code>?</p>
</div>

<div class="example-wrapper">
  <p><code>scrollbar-width: auto;</code></p>
  <textarea class="scrollbar-width-auto">
Whose textareas these are I think I know.
His homepage is in the village though;
He will not see me stopping here
To watch his UI fill up with scroll.

My little mouse must think it queer
To scroll without a scrollbar near
Between the text and whitespace lake
The darkest OS theme of the year.

He gives his trackpad bells a shake
To ask if there is some mistake.
The only other sound’s the sweep
Of scrollwheels' rumbling ache.

The scrollbars are lovely, dark, and deep.
But I have visual clarity to keep,
And miles to scroll before I sleep,
And miles to scroll before I sleep. 
  </textarea>

  <p><code>scrollbar-width: thin;</code></p>
  <textarea class="scrollbar-width-thin">
Whose textareas these are I think I know.
His homepage is in the village though;
He will not see me stopping here
To watch his UI fill up with scroll.

My little mouse must think it queer
To scroll without a scrollbar near
Between the text and whitespace lake
The darkest OS theme of the year.

He gives his trackpad bells a shake
To ask if there is some mistake.
The only other sound’s the sweep
Of scrollwheels' rumbling ache.

The scrollbars are lovely, dark, and deep.
But I have visual clarity to keep,
And miles to scroll before I sleep,
And miles to scroll before I sleep. 
  </textarea>

  <p><code>scrollbar-width: none;</code></p>
  <textarea class="scrollbar-width-none">
Whose textareas these are I think I know.
His homepage is in the village though;
He will not see me stopping here
To watch his UI fill up with scroll.

My little mouse must think it queer
To scroll without a scrollbar near
Between the text and whitespace lake
The darkest OS theme of the year.

He gives his trackpad bells a shake
To ask if there is some mistake.
The only other sound’s the sweep
Of scrollwheels' rumbling ache.

The scrollbars are lovely, dark, and deep.
But I have visual clarity to keep,
And miles to scroll before I sleep,
And miles to scroll before I sleep. 
  </textarea>
</div>
.no-support {
  text-align: center;
  padding: 10px;
  width: 450px;
  margin-left: auto;
  margin-right: auto;
  background: #ee6620;
  color: #fff;
  font-size: 14px;
  font-family: sans-serif;
}

@supports(scrollbar-width: thin) {
  .no-support {
    display: none;
  }
}

.example-wrapper {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
 
}

textarea {
  width: 300px;
  height: 100px;
  resize: none;
}

.scrollbar-width-auto {
  scrollbar-width: auto;
}
.scrollbar-width-thin {
  scrollbar-width: thin;
}
.scrollbar-width-none {
  scrollbar-width: none;  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.