滚动条的HTML保留空间 [英] HTML reserve space for scrollbar

问题描述

我的div可能会在添加或删除内容时溢出.

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

但是，UI设计器不需要可见但不活动的滚动条(如 overflow:scroll )，并且他们不希望在添加和删除内容时更改内容布局(如 overflow:auto ).

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/

推荐答案

执行此操作的唯一方法是使容器中项目的宽度固定.而且您必须对滚动条的宽度保持保守.

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/

这篇关于滚动条的HTML保留空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！