如何用JavaScript模拟鼠标滚轮向上或向下？

Question

我有一个具有沉浸式视图的网络应用程序。在此视图中，我可以使用鼠标滚轮操作放大或缩小。

我想做的是创建 2 个调用 JavaScript 函数并模拟鼠标滚轮操作的按钮。

我尝试过：

window.scrollTo(0,300);

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

如何模拟鼠标滚轮向上或向下？

Answer 1

所以经过一番研究我解决了我的问题。

这就是我所做的：

我创建一个鼠标事件并向其传递一个滚轮事件：

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

然后我可以设置

deltaY

，具体取决于您想要轮子向上还是向下。

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

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

element.dispatchEvent(evt);

Answer 2

我现在发布了关于触发轮子事件的答案，因为

initEvent

已被弃用：

https://stackoverflow.com/a/72525302/16054918

您可以根据您的需要进行调整或使功能更通用。

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 以获取有关此方法的更多信息。