Make scrollbar visible and customize it only in a specific div (i.e. in left side menu)

Question

I have left side menu that has overflow-y: scroll property set and fixed height (smaller than whole page's height). I want scrollbar to be visible always only inside this left menu. Tried with -webkit-scrollbar and -webkit-scrollbar-thumb but it applies on whole page (but not on left side menu).

Answer 1

I had to do something like that a while ago. I recommend using SASS/SCSS, its way easier to make CSS selectors.

Anyway, for it to take effect, you must specify the element that will have the custom scrollbar.

CSS

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

SCSS

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

Hope this helps!

Answer 2

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