Question

当您滚动到页面中间然后刷新它时，浏览器将自动滚动到您所在的位置。我需要能够区分这种自动滚动和用户滚动，并将不同的事件附加到它们。

我目前正在使用

window.addEventListener('scroll', function(e) {});

收听滚动事件，但会在用户和自动滚动中触发。

有没有办法在两者之间说出来？

PS对类似问题的建议答案仅使用鼠标滚轮作为用户滚动的指示，但如果用户使用鼠标拉动滚动，则会失败

Answer 1

If you have two flags for both events, will that work?

I don't have a mouse to test this in whole unfortunately.

Try this fiddle

window.addEventListener( 'load', function() {
    var mousewheel = 0;
    var scroll = 0;

    window.addEventListener( 'scroll', function(e) {
        mousewheel = 0;
        scroll = 1;
        alert("mousewheel: " + mousewheel + ", scroll: " + scroll);
    }, false);

    window.addEventListener("mousewheel", function(e) {
        mousewheel = 1;
        scroll = 0;
        alert("mousewheel: " + mousewheel + ", scroll: " + scroll);
    }, false);

}, false);

Best of luck.

(Mark this as Answer &/ Upvote if this helped you)

Answer 2

正如 Manohar 之前提到的，您可以使用 onscroll event 和 onwheel event 的某种组合。 onscroll 在所有滚动事件上运行，只要与内容交互。 onwheel 将在鼠标或触控板滚动上运行，但不会在箭头滚动上运行。还值得一提的是，根据上下文，不能保证 onwheel 触发 onscroll 事件。其文档中提供了更多详细信息。

还有另一个类似的问题 here 提供了一些关于重新设计应用的额外建议，同时设置了一些布尔标志，可以帮助确定谁（计算机或真实用户）正在启动滚动。

区分自动浏览器滚动和用户滚动

2 个答案: