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

Posted 2023-02-22

【中文标题】如何在不滚动的情况下触发滚动事件

【英文标题】：How to trigger an on scroll event without scrolling

【发布时间】：2016-06-23 02:40:13

【问题描述】：

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

我不需要 php 或 javascript 解决方案。只需在 chrome 上使用开发工具就足以实现我的目标。

【参考方案1】：

您绝对需要 Javascript 解决方案。你认为还有什么可以做事件监听/触发？

如果您想触发滚动事件，只需在脚本或开发工具控制台中输入window.scrollTo(window.scrollX, window.scrollY); 直接滚动到您所在的位置。或者，您可以使用 CustomEvent 和 dispatchEvent 函数的组合来伪造一个。

如果您想触发滚动事件，请使用window.addEventListener("scroll", function(evt) ... ); 监听滚动并让处理函数执行您需要执行的任何操作。

【讨论】：

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

【参考方案2】：

有点离题：

您不需要使用开发工具，只需使用以下“url”创建一个书签

    javascript:(function()
        /*  Put your code here, e.g. the scrollng event  or add an 
           event listener to the current page or some other code*/
    )();

当您单击此书签时，将在当前页面的环境中执行代码

【讨论】：

好主意，但我对 Javascript 不太熟悉。如果您有真正的解决方案，那就太好了。

【参考方案3】：

window.scrollTo(window.scrollX, window.scrollY); 在 Firefox 中不适合我。 什么都没有发生，这似乎是因为实际上不需要执行滚动即可转到您已经在的地方。

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

（例如试图作弊： window.scrollTo(window.scrollX, window.scrollY-0) 也不起作用。）

【讨论】：

将此作为评论而不是回答。

【参考方案4】：

这不适用于 Chrome 或 Firefox

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

这对两者都有效：

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

不花哨，但有效。

请注意，只有第一行代码是必需的，另一行只是将滚动返回到原来的位置。我必须在按钮上触发滚动功能。如果你碰巧点击了两次按钮，滚动的效果是可见的，不是很花哨。这就是为什么我更喜欢添加第二行代码。

【参考方案5】：

有时您需要找到滚动元素。就我而言，我的 scrollElement 是 body 并在移动设备上运行，所以下面的代码可以正常工作：

document.body.scrollTo(window.scrollX, window.scrollY + 1);

希望对您有所帮助。

【参考方案6】：

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

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

与+1 和-1 像素的双重滚动相比，这感觉更少黑客攻击（并且性能更高）...

这应该运行任何一段代码来监听scroll 事件。

编辑：要支持IE11 或其他旧版浏览器，请考虑使用CustomEvent polyfill，例如mdn-polyfills

【讨论】：

完美 - 也是时机：D

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

【参考方案7】：

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

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

【参考方案8】：

对于我的用例，我需要将“scrollX”更改为“pageXOffset”，将“scrollY”更改为“pageYOffset” 让非滚动滚动在 IE 11 (Internet Explorer) 中工作：

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

【参考方案9】：

因此，如果您想捕捉客户端向上或向下滚动的时刻，那么为了获得最佳实践，您应该使用“wheel”事件侦听器。

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

现在用于捕捉用户滚动的实际时刻。使用 'event' 对象的 '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`);

);