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

Question

有没有办法防止y滚动条改变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

使用您希望此功能处于活动状态的元素名称替换元素  叠加在元素顶部添加滚动条而不是将其添加到元素中。

element {
   overflow-y :overlay;
  }

Jsfiddle

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