List pan function

Question

I have made this little script. It works great until there is too much content.

Compare this: http://jsbin.com/axewuf/1

With this: http://jsbin.com/axewuf/3

The only difference is the content. The first example is working like it should but for some reason when there is too much content like the second example the script doesn't work like it should.

There is something I have missed. You should be able to drag the mouse all the way to the end of the list but the mouse reaches the end of the screen before you get there. I think I need to take in the height of the screen but I don't know how.

Can anyone figure it out?

Answer 1

A solution was to separate the code. One for when the content height is lower than the window height and one when it's higher.
It's not perfect but it seems to work.

var container = jQuery('.container');
var object = jQuery('.object', container);
var containerHeight, containerOffsetTop, 
    objectHeight, objectNegativeMargin, objectOffsetTop, 
    heightPercent, objectMargin, mouseY;

object.mousemove(function(e){
    containerHeight = container.height();
    containerOffsetTop = container.offset().top;
    objectHeight = object.height();
    objectNegativeMargin = (objectHeight/2);
    objectOffsetTop = object.offset().top;

    if(objectHeight > containerHeight) {
        heightPercent = (e.pageY - containerOffsetTop) / containerHeight;
        objectMargin = -(heightPercent * (objectHeight-containerHeight));
    } else {
        mouseY = e.pageY - objectNegativeMargin;
        objectMargin = (objectOffsetTop - mouseY)/2;
    }                

    object.css({ marginTop : objectMargin });
});