Javascript 通过拖动滚动时调整滚动速度

我在一个我正在工作的网站上有一个页面，其中包括网格（地图）中div中的许多图像。我让div在溢出时显示一个滚动条，并使用jquery通过拖动启用滚动，它的工作方式与预期一致，一次只显示大约100个滚动条。 我唯一的问题是，因为有成千上万的小图像，只移动鼠标一点点就会导致吹过去很多物体。 我现在的问题是，如何修改我的代码，使鼠标在屏幕上移动一次，只会滚动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>

网格中有很多图像
var clicked=false，clickY，clickX；
var map=document.getElementById（'map'）；
$（文件）({
“mousemove”：函数（e）{
单击并更新滚动位置（e）；
},
“mousedown”：函数（e）{
单击=真；
clickY=e.pageY；
点击X=e.pageX；
},
“mouseup”：函数（）{
单击=假；
$（'html'）.css（'cursor'，'auto'）；
}
});
var updateScrollPos=函数（e）{
$（'html'）.css（'cursor'，'row resize'）；
$（map.scrollTop（$（map.scrollTop（）+（clickY-e.pageY））；
$（map.scrollLeft（$（map.scrollLeft（）+（clickX-e.pageX））；
}

---

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

从我的评论中再多透露一点：似乎您正在试图降低滚动速度。从数学上讲，这意味着您只需减少提供给

.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);
}

---

如果要降低滚动速度，只需降低输入到

.scrollTop（）

和

.scrollLeft（）

的值，例如，将它们除以某个因子即可。系数可任意确定，谢谢！这就成功了，我已经考虑过了，但是我把变量分错了。但你的解决方案正是我想要的。很高兴这个解决方案奏效了。我已将我的评论修改为答案，并添加了一些注释和解释：）