Mac OS Sequoia系统下强制显示滚动条的CSS/JS解决方案求助

各位大佬好，我最近碰到个头疼的问题：有使用Mac OS Sequoia系统的用户反馈，他们没法滚动我网站上一个同步滚动的区域——这个区域是靠一个div来控制多个容器同步滚动的，之前好几年都正常运行，结果升级到Sequoia后，用户突然看不到这个div的水平滚动条了，自然也就没法横向滚动。

我没办法强制修改用户的电脑设置，所以就别建议调整系统设置啦，想求一个纯CSS或者JS的方案，能强制让滚动条始终显示出来。我已经在BrowserStack上测试了Safari 18.4和Chrome 137，都能复现这个问题；但在Mac Sonoma系统下测试就完全正常，说明这是Sequoia新出现的兼容性问题。

我已经尝试过以下CSS设置，但效果不理想：

/// <reference path="_colors" />
/// <reference path="_mixins" />
/// <reference path="maincss" />

::-webkit-scrollbar-corner {
  background: $light-gray;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-bar-color, $medium-gray) var(--scroll-bar-bg-color, $light-gray);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  -webkit-appearance: none;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-bar-bg-color, $light-gray);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scroll-bar-color, $medium-gray);
  border-radius: 20px;
  border: 3px solid var(--scroll-bar-bg-color, $light-gray);
}

.scrollbar-container {
  display: none;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* optional for smooth scroll on iOS */
  @media (pointer:fine) {
    display: block;
  }
}

对应的HTML结构是这样的：

<div id="scrollable-block"></div>
<div class="scrollbar-container" style="width: 1036px;">
  <div class="scrollbar-details" style="width: 1393px;">&nbsp;</div>
</div>

简单说下这个区域的逻辑：.scrollbar-container就是那个用来同步控制多个容器滚动的div，它里面的.scrollbar-details宽度比容器宽，用来触发水平滚动条，用户滚动这个div的时候，其他容器会同步滚动。现在的问题就是Sequoia下这个滚动条直接隐身了。

有没有大佬遇到过类似的问题？求指点可行的解决方案！

内容来源于stack exchange