Question

我有一个小脚本运行，所以我可以使用mousedown选项滚动一个div。不幸的是，它会在每次点击时重置，我无法弄清楚它为什么会这样做。

<script>
  $(function () {
    var clicked = false, clickX;
    $("#gallery").on({
        'mousemove': function(e) {
            clicked && updateScrollPos(e);
        },
        'mousedown': function(e) {
            clicked = true;
            clickX = e.pageX;
        },
        'mouseup': function() {
            clicked = false;
            $('html').css('cursor', 'auto');
        }
    });

    var updateScrollPos = function(e) {
        $('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));
    }
  });
</script>

我假设它与

有关

clickX = e.pageX;

$('#gallery').scrollLeft($(window).scrollLeft() + (clickX - e.pageX));

我为什么？因为：＆＃34;返回事件相对于整个文档的水平坐标。＆＃34; 所以我假设它在你点击时采取了原始位置，但是当你实际滚动它时它没有更新。有人解决了这个问题吗？

http://jsfiddle.net/fLr4d7kt/6/

Answer 1

我们已经修好了这个：

$(function () {
    var scroll = 0;

    $(function () {
        var clicked = false, clickX;
        $("#gallery").on({
            'mousemove': function(e) {
                clicked && updateScrollPos(e);
            },
            'mousedown': function(e) {
                clicked = true;
                clickX = e.pageX;
                scroll = $('#gallery').scrollLeft();
            },
            'mouseup': function() {
                clicked = false;
                $('html').css('cursor', 'auto');
            }
        });

        var updateScrollPos = function(e) {
            $('#gallery').scrollLeft(scroll + (clickX - e.pageX));
        }
    });
});

js：http://jsfiddle.net/fLr4d7kt/10/

停止jQuery“点击滚动”重置

1 个答案: