Question

我有一张我给id #scroller的图片。我想要做的是根据鼠标的x坐标水平移动滚动条，但只有在按住它时。我正在尝试将滚动条移动到名为#bar的水平线上。卷轴可以移动的量取决于条的宽度。到目前为止，这是我的代码。

$(document).ready(function() {
    var barWidth = $("#bar").width();
    var mouseDown = false;

    $(document).mousedown(function() {
        mouseDown = true;
    });
    $(document).mouseup(function() {
        mouseDown = false;
    });

    $(document).on("mousemove", function(e) {
        if (mouseDown) {
            if (e.pageX >= barWidth) {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", barWidth);
            } else {
                $("#debug").html(JSON.stringify(e.pageX, undefined, 4));
                $("#scroller").css("left", e.pageX);
            }
        }
    });
});

#debug只是打印出一些东西到屏幕上。它有助于调试。它没有按预期工作。我想让鼠标按住并移动时滚动条移动。

Answer 1

您的问题很可能是因为您没有更改滚动条的位置属性。它应该是style="position:absolute"或style="position:relative" 否则.css("left", barWidth)不会生效。请参见js fiddle here：

https://jsfiddle.net/0m0j35oc/

更重要的是，最好跟踪事件本身的按钮（有关详细信息，请参阅此question），因为可能会在页面外触发mouseup / mousedown事件，从而有效地使缓存状态不同步。见这里的例子：

https://jsfiddle.net/g0uqLL9n/

jquery - 按住鼠标时的事件

1 个答案: