Geek Answers Handbook

Reserved HTML space for scroll bar

I have a div that can overflow when adding or removing content.

However, the user interface designer does not want to see a visible but inactive scrollbar (like overflow: scroll ), and they don’t want the layout of the content to change when adding and removing (like with overflow: auto ).

Is there a way to get this behavior and consider different scrollbars on different platforms and browsers.

enter image description here https://jsfiddle.net/qy9a2r00/1/

+6
source share
3 answers

The only way to do this is to make the width of the elements in the container fixed. And you should be conservative with the scrollbar width.

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

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

+1
source

It is impossible to know how thick the scrollbar is using only HTML and CSS and therefore does not know the width (blue) of the placeholder.

You can solve this problem using scripts. Set the scroll bar in a hidden container and measure the inner and outer width. The difference is the width of the scroll bar. Set this width (e.g. as CSS) for the placeholder. And in the difficult part, hide this element whenever a scroll bar is displayed.

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

0
source

Maybe the append div below will mitigate your problem?

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

-2
source

More articles:


All Articles