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

Question

我目前有一个自定义滚动条，如下所示。我的页面有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;
}

Answer 1

您可以使用CSS属性overflow: auto。这只会在需要时显示滚动条

Answer 2

您可以隐藏所有滚动条：

body { overflow: hidden }

如果您指示“自动”，则会在内容溢出时显示滚动条。

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