跨浏览器滚动条“覆盖”div内容

Question

我正在寻找一个与WebKit浏览器中使用的overflow-y: overlay非常相似的解决方案，即在应用滚动条时不更改div宽度，但它需要适用于每个浏览器。

我曾经使用过overlay，但当我发现自己开始编写针对Firefox和IE / Edge的溢出样式更改的hack时，我很快意识到我需要更好的解决方案。

我喜欢只设置overflow-y: auto的想法，但我有一个精确设计的内容网格，当添加了滚动条上的几个像素时，它会破坏整个列表的布局...

另一个想法是始终应用overflow-y: scroll并调整div宽度以支持滚动条，然后在:hover上使其可见，但我不确定这种跨浏览器的解决方案会是什么样子。

我已经看到许多适用于特定浏览器的解决方案，例如：

• webkit：overflow-y: overlay;
• ie/edge：-ms-overflow-style: -ms-autohiding-scrollbar

但是难道没有所有浏览器都接受的通用解决方案吗！？

- jacoballenwood

---

我个人可以推荐malihu scrollbar作为这种情况下的jQuery滚动条解决方案。 - haxxxton

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>

- Tworsfeline

Answer 2

以下代码将影响现代浏览器（Firefox、Chrome、Edge 和 Safari）的滚动条。

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #dedede #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #ffffff;
}

*::-webkit-scrollbar-thumb {
  background-color: #dedede;
  border-radius: 10px;
  border: 3px solid #ffffff;
}

- Momin