停止jQuery“点击滚动”重置

Stop jQuery "click scroll" reset

本文关键字：点击滚动 重置 滚动 jQuery 停止      更新时间：2023-09-26

我有一个正在运行的小脚本，所以我可以使用鼠标向下选项滚动到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));

为什么是我？，因为："返回事件相对于整个文档的水平坐标。所以我假设它在您单击时占据原始位置，但在您实际滚动时它不会更新。有人对此有解决方法吗？

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

我们像这样修复它：

$(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/

相关文章：