HTML reserve space for scrollbar

Question

I have a div that may overflow as content is added or removed.

However the UI designer does not want a visible, but inactive scrollbar (as with overflow: scroll), and they don't want the content layout to change when one is added and remove (as with overflow: auto).

Is there a means to get this behavior, and considering the different scrollbars on different platforms and browsers.

https://jsfiddle.net/qy9a2r00/1/

There are plugins to replace the native scrollbar, means using javascript. — Stickers, Jul 08 '16 at 12:02
http://manos.malihu.gr/jquery-custom-content-scroller/ will help, examples here: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollbar_themes_demo.html — Suresh Karia, Jul 08 '16 at 12:06

olejorgenb · Answer 1 · 2022-10-27T16:57:23.503

14

No browser support this property yet (2021), but scrollbar-gutter is a suggested solution for this.

Update: 2022 - all modern browsers except Safari support the property.

edited Oct 27 '22 at 16:57

answered Aug 07 '21 at 11:07

olejorgenb

1,203
14
25

Now supported in Chrome/Edge/Opera. Firefox bug waiting for implementors: https://bugzilla.mozilla.org/show_bug.cgi?id=1715112 – 1j01 Nov 15 '21 at 20:27
1

yes, please check this answer! https://stackoverflow.com/a/69966304/2601507 – Lex Jul 23 '22 at 18:33

score 6 · Accepted Answer · answered Mar 08 '17 at 06:37

The only way to do this is to make the width of the items in the container fixed. And you'll have to be conservative with the width of the scrollbar.

   .container { 
       width: 200px;
       height: 200px;
       overflow: auto;
       overflow-x: hidden;
       border: 1px solid black;
   }
   .item {
       width: 200px;
...

https://jsfiddle.net/fr1jnmn6/1/

score 4 · Answer 3 · answered Jul 04 '21 at 17:49

4

overflow-y:overlay would be a partial solution to this as in, it solves the problem of not wanting the content layout to change when a scrollbar is added or removed. Extra padding or margin can be added so that scrollbar doesn't obfuscate the div behind

Here's the jsfiddle for the same https://jsfiddle.net/kitwradr/2qcsj6hw/

answered Jul 04 '21 at 17:49

Kitwradr

1,986
3
18
32

It's a non-standard value though – olejorgenb Aug 07 '21 at 11:05
Bad solution the question is clear that needs to be reserved a place for whether from right, left, bottom or top side. – Otabek Butcher Mar 31 '22 at 07:44
Yes, it does work on any side. – Kitwradr Apr 06 '22 at 04:17

Eugene Charniauski · Answer 4 · 2021-09-08T16:15:32.000

You can setup overflow: scroll to reserve space for scrollbar and add a class that makes scrollbar hidden

body {
 overflow-y: scroll;
}

Hide the scrollbar by adding class to div (or to body) that will make your scrollbar transparent

.scroll-hidden::-webkit-scrollbar
{
    background-color: transparent;
}

.scroll-hidden::-webkit-scrollbar-track
{
    background-color: transparent;
}

To check if you have content overflow you can use this lines:

  const { body } = document
  const overflow = body.scrollHeight > body.clientHeight

If there are no overflow issue we will hide scrollbar and with reserve space

body.classList.add('scroll-hidden')

If content overflow we will show scrollbar

body.classList.remove('scroll-hidden')

Try the solution here https://jsfiddle.net/ycharniauski/y0pwftmq/

It's a bit hacky solution. Hope in future css will have some property to reserve space

score 1 · Answer 5 · answered Jul 08 '16 at 16:05

1

One cannot know how thick the scrollbar is, using only HTML & CSS and thus do not know the width of the (blue) placeholder.

You might solve such a task using scripting. Force a scrollbar in a hidden container and measure the inner and outer width. The difference being the scrollbar-width. Set this width (e.g. as CSS) to the placeholder element. And in the tricky part hide this element whenever a scrollbar is shown.

The usual solution to this problem is the one you do not want.

answered Jul 08 '16 at 16:05

feeela

29,399
7
59
71

Usual solution being, living with "auto" or "scroll" style, replace the entire scrollbar from scratch, or using JS to measure a scrollbar and detect it being added and remove, such that I can adjust the blue bar styles? – Fire Lancer Jul 09 '16 at 10:57

score 0 · Answer 6 · answered Apr 22 '21 at 12:18

You need to have a parent div with a fixed width (the final total width) and a child div with a width 16px smaller. Then the scrollbar will have 16px free in the parent div.

The width should always be a number (can't be relative value). In the child div, you need to use a number as well. You can't do calc(100%-16px).

<div className="user-list">
  <div className="user-list__content">
    {content}
  </div>    
</div>

.user-list {
  width: 500px;  /* total width */
  height: 1000x;
  overflow-y: auto;
}

.user-list__content {
  width: 484px;  /* must be 16px smaller */
  height: 100%;
}

score 0 · Answer 7 · answered Oct 31 '21 at 19:02

This is an ancient question, but in case anyone comes looking.

Detect the scrollbar and show/hide your blue section based on the scrollbar being visible. If scrollbar is visible, HIDE your blue sections (apply a style). If not visible, show your blue padding section.

When the scrollbar becomes visible your padding hides, so the red and green sections will not change size or position.

This article below discusses detecting the scrollbar. You will want to set up a div somewhere to detect the current scrollbar width ahead of time in order to set your blue boxes to the same width.

How can I check if a scrollbar is visible?

score -3 · Answer 8 · answered Jul 08 '16 at 15:57

-3

Maybe append a div at the bottom will soft your problem ?

https://jsfiddle.net/moongod101/k7w574mw/1/

answered Jul 08 '16 at 15:57

Felix Fong

969
1
8
21

This answer seems unrelated to the problem. The jsfiddle link is broken – TMG Aug 01 '17 at 07:25

HTML reserve space for scrollbar

8 Answers8

Linked

Related