Question

我正在使用的网站上有一个页面，其中包含网格（地图）中div中的许多图像。我使div在溢出时显示了一个滚动条，并使用jquery通过拖动启用了滚动，并且按预期工作，一次仅显示一百个左右。我唯一的问题是，由于有成千上万的小图像，仅移动鼠标一点就已经导致划过很多物体。我现在的问题是，我该如何修改我的代码，以便将鼠标移到屏幕上一次只能滚动大约div宽度的十分之一。所以基本上我想降低滚动速度。我是javascript等的新手，所以请耐心等待。

<div id="map" class="center unselectable overflow">
lots of images here in a grid</div>

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

var updateScrollPos = function(e) {
    $('html').css('cursor', 'row-resize');
    $(map).scrollTop($(map).scrollTop() + (clickY - e.pageY));
    $(map).scrollLeft($(map).scrollLeft() + (clickX - e.pageX));
}
</script>

TLDR：如何降低jQuery中的滚动拖动速度？

Answer 1

从我的评论中可以得到更多细节：似乎您正在尝试降低滚动速度。从数学上讲，这意味着您所需要做的就是减少馈给.scrollTop()和.scrollLeft()函数的值。可以通过将它们除以一组任意确定的因子来完成，这样变换是线性的。例如，如果要将滚动速度降低10倍，则只需将值除以10：

var updateScrollPos = function(e) {
    var scrollTop = $(map).scrollTop() + (clickY - e.pageY);
    var scrollLeft = $(map).scrollLeft() + (clickX - e.pageX);

    $('html').css('cursor', 'row-resize');
    $(map).scrollTop(scrollTop / 10);
    $(map).scrollLeft(scrollLeft / 10);
}

提示：由于您多次访问$(map)，因此可以通过缓存来（微）优化代码：

var updateScrollPos = function(e) {
    var $map = $(map);

    var scrollTop = $map.scrollTop() + (clickY - e.pageY);
    var scrollLeft = $map.scrollLeft() + (clickX - e.pageX);

    $('html').css('cursor', 'row-resize');
    $map.scrollTop(scrollTop / 10);
    $map.scrollLeft(scrollLeft / 10);
}

通过拖动滚动来调整滚动速度

1 个答案: