javascript - 调整拖动滚动时的滚动速度

Question

我在我正在处理的网站上有一个页面，该页面在网格( map )的 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);
}