在浏览器中,中断窗口滚动

Question

在Chrome Devtools中,您可以在更改DOM元素的属性或元素的子树修改时中断javascript.

我正在研究一些遗留代码,它们有一些javascript在某些情况下滚动到页面顶部,我想找到执行此操作的JS.

在Devtools中有没有办法让滚动事件中断？

它可能是jQuery或Prototype.js或事件基础JS来做它,我搜索了.scrollTop或.animate的代码库,我发现了很多这些,但没有一个导致我的问题.

Answer 1

我对实际破坏没有其他想法.

但我怀疑它不是滚动导致问题,而是html中的'#'.

<a href="#" onclick="return false;">x</a>

是一种非常常见的模式.当你忘记(或者有什么东西阻止)"return false"时,#(空锚)将被导航到,这会导致滚动到顶部.

点击后检查网址末尾是否有#!

Answer 2

您可以使用控制台注入这行 JS，以便在滚动位置以编程方式更改时触发调试器。

window.__defineSetter__("pageYOffset", function(){
    debugger;
});

然后，查看调用堆栈以了解触发它的原因。

如果您不想激活调试器，可以使用以下代码打印堆栈跟踪：

window.__defineSetter__("pageYOffset", function(){
    console.log(new Error().stack);
});

另一种选择是用您自己的方法替换 windowsscroll和scrollTo方法。scrollBy

window.__defineGetter__('scroll', function(){
  console.log('window.scroll getter :' + new Error().stack);
  return function(x,y){
    debugger; //or print stack trace
    oldScroll(x,y);
  }
});

重复scrollTo和scrollBy。