How to customize mcustomscrollbar in H5?

2 years ago
Liam
2 minutes

In H5, you can customize mcustomscrollbar using CSS styles. Here are some common customization options:

  1. Customize the scroll bar color:
    You can use the following CSS properties to customize the color of the scroll bar:
::-webkit-scrollbar {
    background-color: #f5f5f5;
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

The background-color property here can control the background color of the scrollbar, the width property can control the width of the scrollbar, the ::-webkit-scrollbar-thumb selector is used to control the color of the scroll bar’s drag block, and the ::-webkit-scrollbar-thumb:hover selector is used to control the color when hovering over the scroll bar.

  1. Customize the width and height of the scrollbar:
    You can use the following CSS properties to customize the width and height of the scrollbar:
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

The width attribute here can control the width of the scroll bar, and the height attribute can control the height of the scroll bar.

  1. Customizing the style of scrollbars:
    You can use the following CSS properties to customize the style of scrollbars:
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 5px;
}

The background-color property here can control the background color of the scroll bar, while the border-radius property can control the border radius of the scroll bar.

  1. Customizing the shadow effect of the scroll bar:
    You can use the following CSS properties to customize the shadow effect of the scroll bar:
::-webkit-scrollbar-thumb {
    background-color: #888;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

The box-shadow property here controls the shadow effect of the scrollbar thumb.

The above are just some common custom options, and you can make more style adjustments according to your own needs.

bannerAds