防止y-scroll-auto改变div的内部宽度

Question

有没有办法阻止y-scroll-bar改变div容器的内部宽度。 div容器的孩子可以总是有正确的填充，直到滚动条出现？ js fiddle

HTML

<div> 
    <span> 
    Lorem ipsum dol... 
    </span> 
</div> 

CSS

div { 
    border: solid 1px; 
    width: 200px; 
    height: 150px; 
    overflow: auto; 
    margin: 10px; 
} 

span { 
    display: block; 
    background: rgba(122, 150, 255, 0.23); 
} 

Answer 1

通过元件的名称替换元件：

在示例中，文本根据垂直滚动条的存在具有不同的宽度您希望此功能处于活动状态。
Overlay在元素顶部添加滚动条，而不是将其添加到元素中。

element { 
    overflow-y :overlay; 
    } 

Jsfiddle

我已经更新的jsfiddle。现在这两个元素是相同的。
尽管滚动条仍然位于顶部。你可以通过initialWidth +滚动条的宽度使用javascript的宽度，但滚动条的宽度在不同的浏览器不同，所以请不要尝试，因为它会导致兼容性问题。