如何在第一次点击html画布时阻止滚动？

Question

我有一个带有交互式处理草图的大画布，我想在页面加载后立即运行。出于某种原因，当用户第一次点击屏幕（在画布上）时，页面会向下滚动一点点。这很烦人，因为用户在第一次与草图交互时错过了点击目标（等到文本＆＃34;点击任何物种＆＃34;出现）。

http://417i.com/alcazar-vegetal/

我尝试将canvas元素集中在页面加载上，也通过javascript点击，甚至可以阻止默认，但没有任何效果。

=SIGN(COUNTIFS(A:A, F2, B:B, G2, C:C, H$1))

Answer 1

这是浏览器的正确默认行为。它与P5.js甚至JavaScript没有任何关系。

以这种方式思考：让我们说你有一个装满按钮的页面，这些按钮超过了视口的底部。现在，用户（由于可访问性问题而无法使用鼠标）使用tab键与页面进行交互。按tab键可更改焦点。用户一直按下Tab键，直到焦点转到视口下方的按钮。这会导致视口滚动，以便按钮处于视图中。

这是在这里发生的事情。单击画布使其获得焦点，获得焦点会导致视口滚动，从而使画布完全可见。

要解决这个问题，您可以做一些事情：

• 检测焦点更改并手动将视口滚动回顶部。
• 尝试查看是否有禁用默认滚动功能的方法。 this page上的preventScroll参数似乎很有希望。另请参阅：Preventing page from scrolling on focus switching和disable scrolling on input focus in javascript，
• 调整画布大小，使其填充视口而不会大于它。

如果我是你，我会选择第三种选择，但这取决于你。如果您仍然无法使其发挥作用，请在新问题帖子中发布MCVE，我们将从那里开始。祝你好运。