css - 在同一页面上滚动另一个元素时隐藏滚动条？

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。这只会在需要时显示滚动条