Make scroll bar take no space / prevent layout shift

Question

I am making an application with html and am needing to have a scroll bar. But whenever I add one it shifts everything over to make the necessary room needed for the scroll bar. This screws up the layout of the application.

So I need a way to make the scroll bar simply overlay on top of the page, meaning the page is still there behind it. I already know how to style the scroll bar to make the back transparent, I just need the scroll bar to not take up any space.

Thanks In Advance!

Can you provide your current code, [perhaps with this?](http://jsfiddle.net). My **psychic** powers aren't working well today. Furthermore, if the `scrollbar` isn't taking up any space... how would you scroll...? Your best bet here is to force the scroll bar to ALWAYS show. Alternatively, use padding on your elements so that won't happen. — Nicholas Hazel, Jan 26 '14 at 18:28
If posting code to JSFiddle, then it should also be posted here so that the question is self-contained. Of course, the code should be posted here regardless, but posting only to JSFiddle or the like is not satisfactory. — ajp15243, Jan 26 '14 at 18:31
i mean the scrollbar is there it's just that the content of the site could be behind it, as if the scrollbar wasn't there, but you can still see it — Porter Morgan, Jan 26 '14 at 19:12
@NicholasHazel, if the content doesn't reach to the bottom of the page, the scrollbar will not appear. — yaakov, Jul 17 '16 at 20:24

KyleMit · Answer 1 · 2022-08-23T11:38:54.213

Update 2021 - Use `scrollbar-gutter`

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

body {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Example

Demo in Stack Snippets and jsFiddle

body {
  padding: 16px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 273px);
    grid-gap: 16px;
}
.card-header {
  margin-bottom: 4px;
  white-space: pre-line;
  font-weight: bold;
}
.card-body {
  overflow: auto;
  border: 1px solid black;
  height: 120px;
  
}
.scrollbar-stable {
  scrollbar-gutter: stable;
}

<h1><code>scrollbar-gutter</code> sample</h1>

<div class="grid">

  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
</div>

Update - `overlay` was webkit-only and is now deprecated.

You can use the overflow overlay property instead of scroll:

html {
    overflow-y: overlay;
}

edited Nov 14 '21 at 18:16

KyleMit

30,350
66
462
664

answered Mar 04 '19 at 08:45

Sos Sargsyan

246
2
7

7

`overflow: overlay` has been deprecated and should not be used. And is only supported in WebKit based browsers. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow – Thyme Mar 08 '19 at 16:26
1

Unfortunately, while it's kinda working it till won't render the content visibly behind the scrollbar's width. It's kinda weird. – wintercounter Sep 01 '20 at 09:26
1

I can't see that this is deprecated. It still works in 2022, and seems like a valid progressive solution for Webkit based browsers. – suncat100 Nov 28 '22 at 05:21
please think a 1000 times before `overflow-y: overlay;` property. Happened to use this one project and skewered my animations, also caused necessary problems on mobile. – first Apr 28 '23 at 09:38

score 17 · Accepted Answer · answered Jan 26 '14 at 18:32

17

There's no way to make a scrollbar appear on top of your content without using shady hacks, and it's not the best idea anyways since it will affect the usability of your app. If the scroll bar is over the content, it's likely to hide links/text/etc.

Your page ideally should be styled in such a way that it adapts to different browser/page widths without breaking. Especially with just a little scroll bar.

Anyways, here's a workaround that may help:

html {
    overflow-y: scroll;
}

Adding this style will make sure the scroll bar track is always present, and will also help avoid "jumpy" pages when a scrollbar appears/disappears. Again, the real solution is to use a flexible layout.

As a side note, styling the scrollbar is generally not recommended. It doesn't work cross-browser and will usually be ignored completely.

answered Jan 26 '14 at 18:32

Wesley Murch

101,186
37
194
228

^ Yeah, what he said. +1 – Nicholas Hazel Jan 26 '14 at 18:36
1

I don't need to worry about cross browser as im using tidesdk which uses webkit only. I guess ill just have to figure out a way to deal with it. Thanks! – Porter Morgan Jan 26 '14 at 19:04
I wouldn't even recommend it in webkit, in fact there was a recent update which drastically changed the scrollbar. – Wesley Murch Jan 26 '14 at 19:16
great! I test it and it works as expected. – s00103898-276165-15433 Apr 09 '22 at 01:45
Please refer KyleMit answer which work great. – Manoj TM May 24 '22 at 05:01
Horrible answer IMO especially since scrollbars in mobile browsers are overlaid on top of the content BY DEFAULT but oh no using the same for desktop would be a horrible idea. Thanks Mozilla for not letting us "ruin" our applications. – Glass Cannon Aug 22 '22 at 22:38

score 4 · Answer 4 · answered Jan 05 '21 at 03:02

You can solve this by hiding scrollbar. The solution is in ws3Schools website, https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>
</head>
<body>

<h2>Hide scrollbar but keep functionality</h2>
<p>Try to scroll inside the div below:</p>

<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>

</body>
</html>

PaperStrike · Answer 5 · 2021-03-29T13:27:49.567

If you are not afraid of having something hidden, code below seems to work.

body {
  width: 100vw;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. For browsers don't support clip, reset scrollLeft to 0 at the scroll event callback of document.body if needed.

See also, browser compatibility of overflow.

score -1 · Answer 6 · answered Jan 05 '21 at 03:08

If you want to hide the scrollbar all the time, can use this code. * mean all

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
*{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

Make scroll bar take no space / prevent layout shift

6 Answers6

Update 2021 - Use `scrollbar-gutter`

Example

Demo in Stack Snippets and jsFiddle

Further Reading

Update - `overlay` was webkit-only and is now deprecated.

Linked

Make scroll bar take no space / prevent layout shift

6 Answers6

Update 2021 - Use scrollbar-gutter

Example

Demo in Stack Snippets and jsFiddle

Further Reading

Update - overlay was webkit-only and is now deprecated.

Linked

Update 2021 - Use `scrollbar-gutter`

Update - `overlay` was webkit-only and is now deprecated.