This code working for all other browsers, but right space is not symmetrical on Safari browsers, but everything ok on other browsers. I know that this property is not supported on Safari and I searching for solution.

.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>

This code working for all other browsers, but right space is not symmetrical on Safari browsers, but everything ok on other browsers. I know that this property is not supported on Safari and I searching for solution.

.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>

How to implement it on Safari

• javascript
• html
• css

• 2 According to caniuse./mdn-css_properties_scrollbar-gutter, this does not appear to have been implemented in Safari yet. – C3roe Commented May 25, 2023 at 10:25

2 Answers 2

I calculate the browser scrollbar width using Javascript and manually add it as a margin, It's annoying but this is the only way I know how to support Safari users

The Javascript I use

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`);

The CSS I use

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

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

How to get the scrollbar width: How can I get the browser's scrollbar sizes?

You can set overflow-y: scroll by default + transparent color for the -webkit-scrollbar-thumb. And for the hover - change the color to the one you need.