在鼠標懸停時水平平滑滾動

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

好像我沒有做足夠的研究。 這是另一個帖子的答案。 在懸停時生澀的水平滾動