跨浏览器滚动条,"覆盖"div内容

Question

我正在寻找一种与overflow-y: overlaywebkit浏览器非常相似的解决方案,即在应用滚动条时不会改变div宽度,但它需要适用于每个浏览器.

我正在使用叠加,但是当我发现自己开始为firefox编写hacks而ie/edge更改列表上的溢出样式以弥补不支持的叠加时,我很快意识到我需要一个更好的解决方案.

我喜欢设置的想法 overflow-y: auto,但我有一个内容网格,它是如此精确的样式,当添加滚动条上的几个像素时,它会混淆列表的整个布局......

另一个想法是始终应用overflow-y: scroll和调整div宽度以支持滚动条,然后使其可见:hover,但我不确定这是什么跨浏览器解决方案.

我见过许多适用于特定浏览器的解决方案,即

• WebKit的: overflow-y: overlay;
• 即/边缘: -ms-overflow-style: -ms-autohiding-scrollbar

但是没有所有浏览器都接受的通用解决方案!？

Answer 1

这是一个建议：

div {
  overflow-y: scroll;
  height: 150px;
  width: calc(100vw + 1.5ch);
}

/* 
1.5ch is equivalent to the scrollbar length, at least on my end.
You can change 100vw to something else, it is the width you had.
*/

<div>
  <h1>Hello!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>