Question

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

上的示例

此刻，我的滚动工作正常，但是它不流畅并且存在bug。我认为我的活动连续触发了很多次，但我不知道如何正确解决此问题。

这是我的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

似乎我没有进行足够的研究。这是另一个线程的答案。 Jerky horizontal scroll on hover

在鼠标悬停时平稳地水平滚动

2 个答案: