如何使用 javascript 将滚动事件记录到控制台

Question

我想将 window 上任何滚动事件的 x 和 y 变化输出到 console - 只是为了测试一些东西。
你如何用纯 JS 做到这一点？

Answer 1

要获得卷轴你可以这样做：

var scrollX = window.pageXOffset || document.documentElement.scrollLeft; 
var scrollY = window.pageYOffset || document.documentElement.scrollTop;

并在纯 Javascript:

上捕获滚动事件

function myScript(){
    var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
    var scrollY = window.pageYOffset || document.documentElement.scrollTop;

    console.log('Scroll X:'+scrollX+' Scroll Y:'+scrollY)
}

window.addEventListener("scroll", myScript);

您可以手动调用 myScript()，它也会 return 有效值

Answer 2

window.onscroll=function(){
   console.log( 
     'top: '  + (window.pageYOffset || document.documentElement.scrollTop) + ' ' +
     'left: ' + (window.pageXOffset || document.documentElement.scrollLeft)
   );
}

asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>asdf<br>

编辑：

除了直接设置函数，您还可以使用：window.addEventListener('click', func, false)。

请注意，为了向后兼容（尤其是 < IE9），您需要 attachEvent，这是基本的 workaround:

function addEventHandler(elem, eventType, handler) {
 if (elem.addEventListener)
     elem.addEventListener (eventType,handler,false);
 else if (elem.attachEvent)
     elem.attachEvent ('on'+eventType,handler); 
}

Answer 3

我通常使用这样的东西：

window.addEventListener('scroll', console.log);

如何使用 javascript 将滚动事件记录到控制台

how to log scroll events to console with javascript

javascript

events

scroll