我有一个大 Canvas ，上面有一个交互式处理草图，我想在页面加载后立即运行它。由于某种原因，当用户第一次单击屏幕(在 Canvas 上)时，页面会向下滚动一点。这很烦人，因为用户第一次与草图交互时错过了点击目标(等到文本“点击任何物种”出现)。
http://417i.com/alcazar-vegetal/
我尝试过将 Canvas 元素集中在页面加载上，也尝试通过 javascript 单击，甚至阻止Default，但没有任何效果。
<!DOCTYPE html>
<html>
<head>
<meta name="Alcazar Vegetal" CONTENT="Alcazar Vegetal">
<title>Alcazar Vegetal</title>
<script src="processing-1.4.1.min.js"></script>
<script>
document.onload = function() {
var elem = document.getElementById("main_canvas");
elem.click();
elem.focus();
elem.preventDefault();
}
</script>
<style>
canvas{border:0px;margin:0px;padding:0px;outline:none;}
canvas:focus{outline:none;}
</style>
</head>
<body bgcolor="white" style="color:rgb(20,20,20)">
<canvas datasrc="alcazar_vegetal_viz_Pjs.pde" tabindex="1"></canvas>
<br>
<br>
</body>
</html>
最佳答案
这是浏览器正确的默认行为。它与 P5.js 甚至 JavaScript 无关。
这样想:假设您有一个充满按钮的页面，并且这些按钮超出了视口(viewport)的底部。现在，用户(由于辅助功能问题而无法使用鼠标)使用 tab 键与页面交互。按 tab 键可更改焦点。用户持续按 Tab 键，直到焦点转到视口(viewport)下方的按钮。这会导致视口(viewport)滚动，以便按钮位于 View 中。
这就是这里发生的事情。单击 Canvas 会使其获得焦点，而获得焦点会导致视口(viewport)滚动，以便 Canvas 完全可见。
要解决这个问题，您可以采取以下措施:
- 检测焦点变化并手动将视口(viewport)滚动回顶部。
- 尝试看看是否有办法禁用默认的滚动功能。 this page 上的
preventScroll参数看起来很有希望。另请参阅:Preventing page from scrolling on focus switching和 disable scrolling on input focus in javascript , - 调整 Canvas 大小，使其填充视口(viewport)而不大于视口(viewport)。
如果我是你，我会选择第三种选择，但这实际上取决于你。如果仍然无法正常工作，请发帖MCVE在一个新的问题帖子中，我们将从那里开始。祝你好运。
关于javascript - 第一次点击html Canvas 时如何防止滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48603670/