Customizing Scroll Bar in Angular Metronic Sidebar Menu
Hello esteemed developers,
I trust this message finds you well. I'm currently grappling with a challenge related to customizing the appearance of scroll bars within a menu component of my application.
Specifically, I'm seeking guidance on how to alter the color of the scroll bar utilized within the following HTML struct
<div id="kt_app_sidebar_menu_wrapper" class="app-sidebar-wrapper hover-scroll-overlay-y my-5" data-kt-scroll="true"
data-kt-scroll-activate="true" data-kt-scroll-height="auto"
data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer"
data-kt-scroll-wrappers="#kt_app_sidebar_menu" data-kt-scroll-offset="5px" data-kt-scroll-save-state="true">
</div>Could you kindly provide insights or best practices for accomplishing this customization within the context of my application? Your expertise and guidance on this matter would be immensely appreciated.
Thank you for your time and assistance. I eagerly await your response.
Warm regards,
Savio Lenvica
Replies (2)
Hi Savio Lenvica
Apologise for the delay in response. In the _variables.scss file, you can find the $scrollbar-color variable, which you can adjust to change the color of the scrollbar. Here's how you can do it:
Open the _variables.scss file located in /src/assets/sass/core/components/_variables.scss.
Find the $scrollbar-color variable. It should look something like this:
$scrollbar-color: $gray-200 !default;Save the file and recompile your SCSS files to apply the changes.
After making these changes, the scrollbar color in your Angular Metronic project should reflect the new color you've set.
Thank you
Is possible adjust the scroll bar size?
I want to increase the width of scroll bar. On lg screens it looks small.
Thanks!
