window.addEventListener('scroll', func) 在 window.location="#target" 之后触发

Question

我在页面上有一个按钮。当我单击按钮时，页面向下滚动到指定的目标，然后为 scroll 事件添加一个事件侦听器 window，但是滚动事件会立即触发，而不是在用户下次滚动时触发。

任何人都可以告诉我为什么会这样，以及如何在滚动到指定目标后向 window 添加滚动事件？我正在使用 Firefox 37.0.2

HTML

<button>Click Me!</button>
<!-- Enough br tags to make the page have a scroll bar -->
<div id="target">Text</div>

JS

document.getElementsByTagName('button')[0].addEventListener('click', function(){
    // Both of the following will trigger the scroll event:

    //window.location = '#target';
    //document.getElementById('target').scrollIntoView();

    window.addEventListener('scroll', function(){
        // Removes this function from the window's onscroll event so that it only triggers once
        this.removeEventListener('scroll', arguments.callee);
        alert('Triggered!');
    });
});

Answer 1

看了评论，好像是浏览器没有立即滚动导致的问题。我能够通过一个简单的 setTimeout 将 addEventListener 延迟 1 毫秒来解决这个问题。

我修改后的代码是：

document.getElementsByTagName('button')[0].addEventListener('click', function(){
    // Both of the following will work now:

    //window.location = '#target';
    //document.getElementById('target').scrollIntoView();

    setTimeout(function(){
        window.addEventListener('scroll', function(){
            // Removes this function from the window's onscroll event so that it only triggers once
            this.removeEventListener('scroll', arguments.callee);
            alert('Triggered!');
        });
    }, 1);
});

window.addEventListener('scroll', func) 在 window.location="#target" 之后触发

window.addEventListener('scroll', func) triggers after window.location="#target"

javascript

javascript-events