Question

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

我想要做的是创建2个按钮，调用javascript函数并模拟鼠标滚轮动作。我尝试过：

window.scrollTo(0,300);

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

您有什么想法，我如何在javascript中向上或向下模拟鼠标滚轮？

谢谢

Answer 1

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

这就是我所做的：

我创建一个鼠标事件并传递它的轮子事件。

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

然后我可以设置deltaY，具体取决于你是想要一个轮子还是一个轮子。

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

您可以通过这样做将此事件传递给您的元素：

element.dispatchEvent(evt);

Answer 2

您可以使用JQuery中的$.animate()。这是一个例子：

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

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

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