第一次点击html画布时如何防止滚动？答案

【问题标题】：How to prevent scroll when clicking on html canvas for the first time?第一次点击html画布时如何防止滚动？
【发布时间】：2018-02-04 00:57:47
【问题描述】：

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

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

我尝试将画布元素集中在页面加载上，也通过 javascript 进行点击，甚至阻止默认设置，但没有任何效果。

<!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>

【问题讨论】：

您能否尝试发布一个minimal reproducible example 来证明该问题？当您每次都必须等待动画完成时，很难对此进行测试。空白画布会发生这种情况吗？只画一个形状怎么样，比如圆形？
是的，你是对的，我想我想展示用户如何错过点击目标，但我会上传一个简单的并更新问题。

标签： javascript html canvas processing.js

【解决方案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，我们将从那里开始。祝你好运。

【讨论】：

我不介意页面向下滚动一点，我想避免的是它发生在用户点击时。这就是为什么我尝试将画布元素集中在页面加载上，以在页面加载而不是用户输入时触发滚动。但是elem.focus() 和elem.click() 都没有工作？
@fartagaintuxedo 好的，很酷。我提到了几种不同的方法。请比说某事不起作用更具体。我认为这不会像在草图中的某处添加一条线那么简单。您必须了解我提到的方法才能将它们集成到您的代码中。或者你可以让你的画布更小。