iframe scrollbar replace with my own design

Question

I would like to set custom image to my iframe scrollbar. I know that there are some extensions or add-ons that can be used, but I didnt find a way o customize the design of them. I have png images of my custom scroll bar and I would like to replace the default design with my own. Is it possible? If so how? Can you point me to some direction?

Thank you

Answer 1

Here's a good resource that I used to get it working in Webkit browsers:

But the bigger issue is the iFrame. If you own the content in the iFrame or can change the CSS in it then you are good to go. If you don't own stuff within the iFrame and are using the iFrame to pull in a page from another site then you won't be able to change the scrollbar from the original page.

Answer 2

I would suggest you to use NiceScroll jQuery widget.

It supports IE6+, Chrome 2+, Firefox 3+, Opera 9.5+ and Safari 4+ (and modern mobile browsers), it has a lot of features and it's easy to customize.

Also, it's pretty easy to use. You just call .niceScroll() on the object you want to have a "nicer" scrollbar (in case of an iframe, you will use it on the $("html") object inside it).