How to make custom scrollbar for cross browser using DOJO?

jalpa-solanki

Apr 18th, 2017 03:51 AM

I want to create custom scrollbar using DOJO which should be cross browser support. So how can i create it?

devdojo

Apr 19th, 2017 10:24 AM

Can you be a little more descriptive when you say using DOJO, which product or library are you referring to, can you provide a link :)

Thanks.

jalpa-solanki

Apr 19th, 2017 10:38 AM

Hi.... I am not referring any product or library. Actually I am creating one table with fixed height. so if my data is more, vertical scrollbar is coming. And I need to customize that vertical scrollbar with different color, size etc.

Also for our application, jQuery cannot be used. So could please guide me that using only DOJO, how can i customize the scrollbar? example as the below image:

devdojo

Apr 21st, 2017 02:21 PM

Hey There :)

Using CSS you can easily add customizations to your scrollbar with the following:

#container::-webkit-scrollbar-track {
    border-radius: 0px;
    background: #3D4047;
}

You may also want to take a look at this reference and it will tell you how to customize the whole thing. https://css-tricks.com/custom-scrollbars-in-webkit/

You do not need to use jQuery for the scrollbars. If webkit is not supported by the browser it simply won't apply the styles. Hope that helps :)

Thanks. Talk to you soon.

jalpa-solanki

Apr 24th, 2017 10:33 AM

Hi, Webkit is supported by Chrome only. It is not cross browser supported. What should i do if i want the scrollbar styling for IE-11 also.

devdojo

Apr 24th, 2017 02:51 PM

Hey There :)

In that case, I might recommend using a library for that. I've checked out a few libraries that will work with older browsers as well you may want to check out the following resources:

Nano Bar JS Simple Bar Perfect Scrollbar

Hope that helps dude :)

Thanks.