英文:

How to debug a scroll block in JavaScript

问题

我正在使用 scrollIntoView()，但行为对于 scrollTo(...) 甚至 location = '#...' 都是相同的。

当我使用超过 500ms 的超时进行滚动操作时，它有效。一定有什么东西在干扰程序化滚动。

我该如何调试这个问题？
开发者控制台中是否有有关滚动事件以及阻止它的信息？

更新
刚刚发现，在当前版本的 Edge 中，行为仍然如预期般工作。问题只在 Chrome 中出现。

---

附言：单击具有 href 为 #... 的按钮时，滚动也能正常工作。不知何故，用户事件会在不需要超时的情况下通过。

英文:

I'm using scrollIntoView(), but the behaviour is the same for scrollTo(...) and even location = '#....

When I use a timeout > 500ms for the scrolling action it works. Something must be interfering with the programmatic scrolling.

How can I debug this?
Is there some information about the scroll event and what's blocking it in the developer console?

Update
Just found out that the behaviour still works as expected with the current version of Edge. The problem only occurs in Chrome currently.

---

PS: When clicking a button which has as href #..., the scrolling works also. Somehow, the user event goes through without the need for a timeout.

答案1

得分: 2

traktor的回应很棒！但也请记住JavaScript有一个独特的语句叫做debugger。它会暂停你的代码执行，让你可以使用浏览器的检查工具查看输出，如果你使用了console.log('example');等。

    let user = 'admin';
    let pass = 'password';
    console.log(user, pass);
    debugger; // 程序在此处暂停。
    let userAndPass = user + ' ' + pass;
    console.log(userAndPass)
}```

希望这对你有帮助！调试器对我一些项目真的很有帮助，能暂停代码执行真的非常有用！ :)

<details>
<summary>英文:</summary>

traktor&#39;s response was great! But also keep in mind javascript has a unique statement called debugger. it&#39;ll pause your code at the line, allowing you to use your browser inspect tool to look at the outputs if you used and console.log(&#39;example&#39;); etc.

let createUser = () => {
let user = 'admin';
let pass = 'password';
console.log(user, pass);
debugger; // Program pauses here.
let userAndPass = user + ' ' + pass;
console.log(userAndPass)
}

Hope this helps! debuggers been a life saver for some of my projects honestly being able to stop the code can be so incredibly useful! :)

</details>