CSS的scrollbar-gutter: stable;在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上实现

- yourBadApple

---

根据https://caniuse.com/mdn-css_properties_scrollbar-gutter，这在Safari中似乎尚未实现。 - CBroe

Safari，继续从Internet Explorer离开的地方开始 :p - Jaromanda X

寻找解决方案。等一下。虽然据报道是"2017-01-23"，但是苹果公司的专家们花了6年仍在摸不着头脑地努力解决它 :p - Jaromanda X

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;
}

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

- Cole nelson