Question

Basically I have a fixed size IFRAME with overflow: auto. The IFRAME displays a given page. What I am trying to acheive is to be able to drag the content of the IFRAME around (so that the content can be navigated without using the scrollbars). Is this possible to do, if so how?

Answer 1

You have to access the iframe page to do this, the scrollbars are not part of the parent page. If you can’t change the code there I think it isn’t possible.

I tried to put something together. It isn’t perfect yet, but it’s a start:

$(function() { /* drag to scroll */
    var move = $('body');
    var x, y;
    var scroll = false;
    move.mousemove(function(event) {
        if (scroll) {
            move.scrollTop(move.scrollTop() + (y - event.pageY));
            move.scrollLeft(move.scrollLeft() + (x - event.pageX));
        }
        x = event.pageX;
        y = event.pageY;
    });
    move.mousedown(function() { scroll = true; return false; });
    move.mouseup(function() { scroll = false; return false; });
});

jsfiddle example: http://jsfiddle.net/jBdjm/