如何在溢出中滚动更大的div：隐藏的div

Question

I have the following structure:

<div id="start">
    <div id="largediv">
        <div id="ball"></div>
    </div>
</div>

The div start has for example fixed height and width like 500px x 500px and the div largediv has 1000px x 1000px . I can move the ball in the 500x500px area but I don't know how to scroll so I can change the position in the largediv . Another thing is that the start div has overflow hidden. Here is the jsfiddle http://jsfiddle.net/zander_pope/xd4fb1nz/

Answer 1

You can use jQuery mousewheel function.

$("#start").on("mousewheel", function(e){    
    var scrollTop = $(this).scrollTop(),
        scrollLeft = $(this).scrollLeft();
    $(this).scrollTop(scrollTop+(e.originalEvent.deltaY));
    $(this).scrollLeft(scrollLeft+(e.originalEvent.deltaX));
    return false;
})

Jsfiddle