javascript - 如何模拟用户点击滚动导航

Question

我正在更新这个问题，以更符合我现在发现的要求。
以前我用过 setintervalTimer创建滚动事件，使用 window.scrollTo ，这不是一个选项，因为页面上当前正在运行的 JavaScript 会导致滚动非常滞后。
这可能吗？

我希望通过模拟用户单击浏览器滚动条并将其拖到页面底部来找到一种与浏览器交互的方法。这是对整个网站及其所有交互的屏幕记录。

如果有另一种方法可以实现(请记住 JS 现在不是一个高性能选项) - 那么请告诉我。
谢谢 -
沃利

Answer 1

我不认为有一种方法可以模拟用户单击滚动条，但是有一种原生的 javascript 方法可以平滑滚动。
如果要滚动到页面上的特定 y 坐标或 x 坐标，请使用以下命令:

// "Top" is y-coordinate
// "Left is x-coordinate
window.scroll({
  top: 100, 
  left: 0, 
  behavior: 'smooth'
});

或者，如果您想从现有位置滚动一定量，可以使用以下命令:

window.scrollBy({ 
  top: 100, // could be negative
  left: 0, 
  behavior: 'smooth' 
});

最后，如果你想滚动到某个 HTML5 元素，你可以使用这个:

document.querySelector('.exampleElement').scrollIntoView({ 
  behavior: 'smooth' 
});

这是一个示例(例如，我使用一堆换行符使页面可滚动):

document.querySelector('#here').scrollIntoView({ 
  behavior: 'smooth' 
});

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>Not Here!</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1 id="here">Here!</h1>

编辑:这些方法可能只适用于更新的浏览器