使滾動條可見並僅在特定的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 {}