自定义iframe滚动条

Question

I was wondering if is possible to customize the scrollbars for an iframe. Both the iframe and the page are on the same domain so there are no issues there. If so, what route should I take and is this something that I should be doing? (design-wise).

I will be updating this as I get it working. Just thought I'd try to get some insight ahead of time.

Thanks

Answer 1

Okay, I ended up getting it working using jScrollPane . The only hangup I had was that jquery.jscrollpane.css needed to be inside each iframe, not outside, which makes sense.

Afterwards, all it took was

$("iframe").each(function(){
    var body = $("body",this.contentWindow.document) ;
    body.jScrollPane();
});

where the above javascript is present in the parent of the iframe. The jScrollPane js files are also in the parent, not each individual iframe.

Afterwards, the scrollbars are sticky. I solved this by covering the iframe in an invisible element after the scrollbar is clicked and uncovering when released. This was done by

$(".jspDrag",body).on('mousedown',cover_iframes);
$("body").on('mouseup',uncover_iframes);

where cover_iframes and uncover_iframes call the .show() and .hide() of the covering element, respectively.

Now I noticed that when the scrollbar is moved, it is shifted over by the offset of the iframe. I am working on fixing that now.