Jquery custom scroll bar on an iframe

Question

I'm looking for a solid cross-browser Jquery custom scroll bar plugin that plays nice with iframes. Does anyone have a nice plugin and a solution?

Answer 1

Depends greatly on the context:

• Do you want to create an iframe with styled scrollbars that other people can place on their site?
• Or are you trying to style someone else's content which is placed on your site via iframe?

If you have control over the content of the iframe, then it's an easy thing to do. I've used http://livepipe.net/ with success.

Custom scrollbars typically work by placing content in a, then moving that element relative to a parent div by javascript.

EDIT 1:

This is the detail page. Just start editing the values. http://livepipe.net/control/scrollbar

You'll know you have it right when loading your page not in an iframe, the fancy scrollbars are 100% the height of your browser viewport no matter the height.

It might also be worth adding a function to recalculate the height of the objects & the positioning of the bottom control on window resize. Although, that's easier to do with jQuery than in PrototypeJS.

EDIT 2: Here's a working example I cooked up: http://pastebin.com/gvtnLANQ

Answer 2

Try this really cool plugin. It helps eliminate the need for a scroll bar: https://github.com/Ashwell/jquery-scrollThis