Question

我正在制作一个创建可滚动div的jQuery插件。您可以使用右侧的div向上和向下滚动。问题是我的可拖动div在移动它时似乎非常颤抖。

我正在尝试的完整示例如下：http://jsfiddle.net/j8Hqq/1/

我认为有问题的代码会在这里：

.mousemove(function(e) {
    if(being_dragged) {
        scroller_y = e.pageY - $(this).offset().top;

        if(scroller_y < 0)
            scroller_y = 0;
        else if(scroller_y > $this.height() - $(this).height())
            scroller_y = $this.height() - $(this).height();
    }

    $(this).css({
        top: scroller_y
    });

    $('#custom-scroll-children').scrollTop(scroller_y);
});

我正在考虑在其中实现jQuery-ui.draggable，但不希望在插件上附加一个大型库。

谢谢，

Answer 1

mousemove中的

$(this).offset().top;会收到不同的值，这就是为什么它会像它一样生涩。将topOffset = $(this).offset().top;放入mousedown函数，然后在mousemove中使用scroller_y = e.pageY - topOffset;，我得到了更平滑的结果。

仍然存在问题（当鼠标离开滚动区域时滚动停止，快速鼠标移动将停止滚动）。

你看过http://jscrollpane.kelvinluck.com/了吗？这是一个jQuery插件，几乎可以帮助你实现这一目标。

Answer 2

.css函数使draggable div juddery，你可以尝试“animate”功能。

jQuery使用可拖动的div滚动

2 个答案: