CSS 滚动条装订线：稳定；在 Safari 浏览器上不工作，但在其他浏览器上工作正常

Question

此代码适用于所有其他浏览器，但在 Safari 浏览器上右侧空间不对称，但在其他浏览器上一切正常。我知道 Safari 不支持此属性，我正在寻找解决方案。

.card {
  background: red;
  padding: 24px 12px 24px 24px;
  width: 240px;
  margin: 0 auto;
  height: 160px;
}

.scrollable-content {
  scrollbar-gutter: stable;
  overflow-y: auto;
  scrollbar-width: thin;
}

.scrollable-content::-webkit-scrollbar {
  width: 12px;
  background-color: blue;
}

.scrollable-content::-webkit-scrollbar-track {
  border-radius: 8px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: rgba(136, 136, 136, 0.5);
  border: 4px solid transparent;
  border-radius: 8px;
  height: 56px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #888888;
}

.card-body {
  background-color: yellow;
}

<div class="card scrollable-content">
  <div class="card-body">
    test lorem100
  </div>
</div>

如何在 Safari 上实现

Answer 1

我使用 Javascript 计算浏览器滚动条宽度并手动将其添加为边距，这很烦人，但这是我知道如何支持 Safari 用户的唯一方法

我使用的Javascript

const scrollDiv = document.createElement('div');
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);

我使用的CSS

body {
    overflow-y: auto;
    margin: 0;
}

body.bodyLock {
    margin-right: var(--scrollbar-width);
    overflow-y: hidden;
}

如何获取滚动条宽度：如何获取浏览器的滚动条大小？

Answer 2

您可以设置

overflow-y: scroll

默认+

-webkit-scrollbar-thumb

透明颜色。对于悬停 - 将颜色更改为您需要的颜色。