如何在不滚动的情况下触发滚动事件

Question

我的问题是，如何触发（模拟或其他方式）滚动事件。在我特殊的情况下，我不想通过向下滚动所有对话来加载LinkedIn中的所有对话，因为太多了！

我不需要PHP或JavaScript解决方案。只需使用Chrome的开发工具即可实现我的目标。

- CTSchmidt

Answer 1

或者，您可以手动触发一个真正的scroll事件，如下所示：

el.dispatchEvent(new CustomEvent('scroll'))

使用 +1 和 -1 像素的双重滚动相比，这种方法感觉更不像黑客技巧（而且更高效）...

这将运行任何监听 scroll 事件的代码。

编辑：为了支持 IE11 或其他旧版浏览器，考虑使用 mdn-polyfills 等 CustomEvent polyfill。

- Pandaiolo

---

完美 - 时间也很好:D - rémy

奇怪的是，在使用react-lazyload时，这对我在Chrome中不起作用，而使用window.scrollTo却可以。 - Eric Majerus

完美运行 - window.dispatchEvent(new CustomEvent('scroll')) - PariSh KhAn

Answer 2

这在Chrome或Firefox上不起作用。

window.scrollTo(window.scrollX, window.scrollY);

这适用于两者：

window.scrollTo(window.scrollX, window.scrollY - 1);
window.scrollTo(window.scrollX, window.scrollY + 1);

简单实用。

请注意，只有第一行代码是必需的，另一行只是为了将滚动条返回到原来的位置。我需要在按钮上触发一个滚动功能。如果您不小心两次点击按钮，则可以看到滚动效果，但这并不太好看。这就是为什么我喜欢添加第二行代码。

- Fran Cano

Answer 3

你必须使用Javascript解决方案。你认为还有什么其他方法来监听/触发事件呢？

如果你想要触发滚动事件，只需在脚本或开发工具控制台中键入 window.scrollTo(window.scrollX, window.scrollY);即可。或者，你可以使用CustomEvent和dispatchEvent函数的组合来虚拟一个滚动事件。

如果你想要在滚动事件上触发某些内容，则需要使用 window.addEventListener("scroll", function(evt) { ... }); 来监听滚动，并使处理函数执行你需要的操作。

- Mike 'Pomax' Kamermans

---

如果您有一个窗口滚动监听器，就像在这个答案中定义的那样，那么您可以使用以下代码触发它：var e = document.createEvent('Event'); e.initEvent("scroll", true, true); window.dispatchEvent(e); - jackocnr

Answer 4

window.scrollTo(window.scrollX, window.scrollY);在Firefox中无法使用。没有任何反应，这似乎是因为并不需要滚动就可以到达您已经存在的位置。

但是，window.scrollTo(window.scrollX, window.scrollY-1);可以工作。通过此命令，window.scroll事件函数被触发。

（尝试欺骗，例如：window.scrollTo(window.scrollX, window.scrollY-0)也无效。）

- user2280102

---

请将以下与编程相关的内容从英文翻译成中文。请将翻译后的文本作为注释返回，而不是答案。 - atilkan

Answer 5

正如其他人所回答的那样，window.scrollTo(window.scrollX, window.scrollY);确实有效，但在某些情况下，您需要将数字添加到窗口当前滚动位置中，例如在我的情况下，我将1添加到我的scrollY，然后像这样调用scrollTo方法：window.scrollTo(window.scrollX, window.scrollY + 1);。

- Behnam Azimi

Answer 6

您可以在元素上触发滚动/滚轮事件，方法如下：

el.dispatchEvent(new CustomEvent('wheel', { detail: { deltaY: 1 } }))

- Spankied

Answer 7

实用函数，每个动画帧滚动1像素

const startFakeScrolling = (container: HTMLDivElement) => {
  const cb = () => {
    container.dispatchEvent(
      new CustomEvent("wheel", { detail: { deltaY: 1 } })
    );
    window.requestAnimationFrame(cb);
  };
  window.requestAnimationFrame(cb);
};

deltaY 在伪滚动事件中不存在，但它将在 detail 中。将其添加到任何处理程序中。

const delta = e.deltaY != null ? e.deltaY : (e.detail as any).deltaY;

- Gabriel Petersson

Answer 8

如果你想捕捉到客户端向上或向下滚动的时刻，那么最好的做法是使用“wheel”事件监听器。

window.addEventListener("wheel", event => {
    /* code here */
});

现在要捕捉用户滚动的实际时刻。使用“事件”对象的“deltaY”或“wheelDeltaY”属性来检查其值，并在低于或高于0的值时执行某些操作，如下所示。

window.addEventListener("wheel", ev => {

    const direction_1 = ev.deltaY;

    if (direction_1 < 0) console.log('scrolling up');
    if (direction_1 > 0) console.log('scrolling down');
    

    const direction_2 = ev.wheelDeltaY;

    if (direction_2 > 0) console.log('scrolling up');
    if (direction_2 < 0) console.log('scrolling down');

});

当向上或向下滚动方向_1或方向_2时，始终返回不精确但为负数或正数的值。

window.addEventListener("wheel", ev => {

  const direction_1 = ev.deltaY;
  if (direction_1 < 0) console.log(`deltaY      |  scroll up  | ${direction_1}`);
  if (direction_1 > 0) console.log(`deltaY      | scroll down | ${direction_1}`);
      
  const direction_2 = ev.wheelDeltaY;
  if (direction_2 > 0) console.log(`wheelDeltaY |  scroll up  | ${direction_2}`);
  if (direction_2 < 0) console.log(`wheelDeltaY | scroll down | ${direction_2}`);

});

- 5m1Ly

Answer 9

对于我的用例，我需要将'scrollX'更改为'pageXOffset'，将'scrollY'更改为'pageYOffset'，以在IE 11（Internet Explorer）中实现非滚动滚动：

    window.scrollTo(window.pageXOffset, window.pageYOffset - 1);
    window.scrollTo(window.pageXOffset, window.pageYOffset + 1);

- Katinka Hesselink

Answer 10

有时候你需要找到scrollElement。在我的例子中，我的scrollElement是body并且在移动设备上运行，所以下面的代码可以正常工作: document.body.scrollTo(window.scrollX, window.scrollY + 1); 希望这对你有所帮助。

- Jerry Ni