在鼠标悬停时平滑水平滚动

Question

我想创建一个没有滚动条的水平滚动效果，而是将鼠标悬停在容器上。如果鼠标向右移动，则向右滚动，如果向左，则向左滚动。

下面是一个关于 https://lionsgate.com 的示例

目前我的滚动正在工作，但它不流畅并且有错误。我认为我的事件连续触发了太多次，但我不知道如何正确解决此问题。

这是我的jQuery

var x,y;
var xPrev;
$(".slider-container").mousemove(function(event) {
var offset = $(this).offset();
x = event.pageX- offset.left;
if(xPrev<x) {
$(this).animate({'scrollLeft': $(this).scrollLeft() + 25}, 100);
console.log('right');
}
else {
$(this).animate({'scrollLeft': $(this).scrollLeft() - 25}, 100);
console.log('left');
}
xPrev=x;
});

Answer 1

是的，您的猜测是正确的，并且在运行代码期间您的 CPU 使用率可能过高。 您必须将区域拆分为多个部分，并将鼠标悬停在每个部分时，将页面滚动到特定位置。 这是一个很好的示例和这样做的来源：

https://www.jqueryscript.net/demo/jQuery-Scroll-On-Hover-Plugin/

Answer 2

似乎我没有进行足够的研究。这是另一个线程的答案。 悬停时生涩的水平滚动