javascript - 列表平移功能

Question

我制作了这个小脚本。在内容过多之前，它的效果很好。

比较一下：http: //jsbin.com/axewuf/1

有了这个：http: //jsbin.com/axewuf/3

唯一不同的是内容。第一个示例按应有的方式工作，但由于某种原因，当第二个示例这样的内容过多时，脚本无法按应有的方式工作。

我错过了一些东西。您应该能够将鼠标一直拖动到列表的末尾，但鼠标在您到达之前到达屏幕的末尾。我想我需要考虑屏幕的高度，但我不知道如何。

任何人都可以弄清楚吗？

Answer 1

一个解决方案是分离代码。一种用于内容高度低于窗口高度的情况，另一种用于内容高度高于窗口高度的情况。
它并不完美，但似乎有效。

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 });
});