使滚动条可见并仅在特定的div中对其进行自定义（即，在左侧菜单中）

Question

我的左侧菜单overflow-y: scroll设置了overflow-y: scroll属性和固定的高度（小于整个页面的高度）。 我希望滚动条始终仅在此左侧菜单内可见。 尝试使用-webkit-scrollbar和-webkit-scrollbar-thumb但它适用于整个页面（但不适用于左侧菜单）。

Answer 1

前段时间我不得不做类似的事情。 我建议使用SASS / SCSS，它使CSS选择器更容易使用。

无论如何，要使其生效，必须指定将具有自定义滚动条的元素。

CSS

.div-class::-webkit-scrollbar {
    // custom scrollbar here
}}

SCSS

.div-class {
    &::webkit-scrollbar {
        // custom scrollbar here
    }
    &::-webkit-scrollbar-thumb {
        // etc etc
    }
}

希望这可以帮助！

Answer 2

试试这个https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp ，如果您知道如何自定义滚动条，则只需要指定要编辑的框之一即可（在您的情况下，侧菜单），可以通过将此伪元素添加到侧边栏选择器中来实现，如下所示： .side-menu::-webkit-scrollbar {}