Css 在同一页面上滚动其他元素时隐藏滚动条？

我目前有一个自定义滚动条，如下所示。我的页面有5个可滚动的元素。当滚动该元素而隐藏其余元素时，如何只显示一个滚动条

/*custom scrollbar*/
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(50, 50, 50, 0.1);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(50, 50, 50, 0.2);
}

::-webkit-scrollbar-track:window-inactive {
    background: transparent;
}

::-webkit-scrollbar-thumb:window-inactive {
    background: transparent;
}

---

您可以使用CSS属性

overflow:auto

。这将仅在需要滚动条时显示

您可以使用以下内容隐藏所有滚动条：

body { overflow: hidden }

如您所示，如果内容溢出，“自动”将显示滚动条

---

我从未尝试过，但可能可以使用JavaScript更接近您所描述的内容，但我对这种设计的人体工程学有严重怀疑。

我的意思是，即使内容溢出，我也希望滚动条在滚动另一个元素时不显示。