能否使用 JavaScript 模拟鼠标滚轮向上或向下滚动？

Question

我有一个具有沉浸式视图的Web应用程序。在此视图中，我可以使用鼠标滚轮操作进行缩放。

我想做的是创建两个按钮，调用 JavaScript 函数并模拟鼠标滚轮操作。我已尝试：

window.scrollTo(0,300);

但在我的情况下，滚动不会缩放（似乎只有鼠标滚轮动作有效）。

您有任何想法，如何在JavaScript中模拟鼠标向上或向下滚轮？

谢谢

- Sambo

Answer 1

经过一些研究，我解决了我的问题。

这是我所做的：

我创建了一个鼠标事件并传递了一个滚轮事件。

var evt = document.createEvent('MouseEvents');
evt.initEvent('wheel', true, true); 

然后我可以根据您想要向上滚动还是向下滚动，设置deltaY的值。

evt.deltaY = +120;
// evt.deltaY = -120

你可以通过以下方式将此事件传递给你的元素：

element.dispatchEvent(evt);

- Sambo

---

这在 Chrome 版本 49（2016 年 4 月）之前有效。现在只是一个轶事了。 - GetFree

你好。我尝试使用你的解决方案，但在Chrome上出现了未定义的错误。 - Raul Chiarella

谢谢。在 Firefox 101 和 Chrome 102 上对我有效。 - cges30901

Answer 2

我现在发布了一个关于触发滚轮事件的答案，因为initEvent已被弃用：

https://dev59.com/-pvga4cB1Zd3GeqP0VQk#72525302

你可以根据自己的需求进行调整，或者将函数更加通用化。

- Benedict Lang

Answer 3

你可以使用 JQuery 中的 $.animate() 方法。以下是一个示例：

$('html, body').animate({
  scrollTop: target.offset().top
}, 1000, function() {
   // Do something when animation is complete
});

target 可以是您想要滚动到的任何 DOM 元素或确定滚动长度的数字。

您应该查看 http://api.jquery.com/animate 以获取有关此方法的更多信息。

- nullwriter

---

这不起作用，滚动动画不会在我的视图上缩放。我认为我应该创建一个鼠标滚轮事件并设置wheelDeltaY或类似的东西。 - Sambo

@Sambo 好的，我刚才看到你想用鼠标滚轮进行放大，但是在你的问题中展示了滚动代码，这让人感到困惑。 - nullwriter

谢谢，我刚刚找到了解决我的问题的方法。所以我创建了一个鼠标事件 var evt = document.createEvent('MouseEvents'); evt.initEvent('wheel', true, true); 如果方向是'内'，则 evt.deltaY = -120; 否则 evt.deltaY = 120; 然后将其传递给我的元素 element.dispatchEvent(evt); - Sambo

太好了！自己回答问题，这样以后提到这个问题时就可以保存了。 - nullwriter