javascript - 添加换行符后防止 chrome 中的 textarea 滚动行为

Question

最近我的 chrome 版本越来越频繁地做一些奇怪的事情(ubuntu 18.04 上的 74.0.3729.131)。我有一个小的编辑器脚本，它有一个显示代码的 textarea。 textarea 具有固定大小和垂直滚动条。除此之外没有什么花哨的。

通常，当我插入换行符(textarea 的正常行为)时，滚动条不会移动。现在出于某种原因，大约 80% 的时间它会向下滚动 textarea 直到插入符号的位置位于 textarea 的顶部。奇怪的是，如果我删除并在同一位置输入换行符，它通常不会滚动。

我不确定这是否是 Chrome 中的一些新问题。我以前使用相同编辑器的版本没有这个问题。

这是一个演示问题的代码笔，滚动到某行，按回车键，textarea 应该向下滚动。尝试几次以查看不可预测的行为(添加代码只是为了能够添加链接，因为您可以看到它只是一个文本区域)。

https://codepen.io/anon/pen/rgKqMb

<textarea style="width:90%;height:300px"></textarea>

我想到的唯一解决方案是停止输入键的正常行为并将换行符添加到文本中。非常欢迎任何其他想法/见解。

Answer 1

快到2020年底了，Chrome 86版本还存在这个问题？更重要的是，我很惊讶我没有找到关于这个问题的更多信息(投诉)(这篇文章是我发现的唯一一篇专门谈到这个问题的文章。)我观察到这种行为不仅发生在打字中，而且粘贴任何包含换行符的文本。我还观察到，如果我在发生这种情况后执行撤消操作，则会发生另一个随机滚动，使我在页面上更远，并且离插入符号的位置不远。
我对这种行为进行了长时间的试验和检查，但找不到任何可重复的情况，这可能会提供有关如何预测何时会发生的线索。它真的只是看起来“随机”。尽管如此，我不得不为我正在创建的 NWJS 编辑器应用程序解决这个问题(NWJS 使用 Chrome 作为 UI。)
这似乎对我有用:
首先，让我从简单开始介绍原理。我们将“输入”监听器和“滚动”监听器附加到文本区域。这是有效的，因为根据我的观察，“输入”[1] 监听器在随机滚动 Action 发生之前被触发。
滚动监听器记录每个滚动操作并将其保存在全局 prevScrollPos 中。 .它还检查全局标志 scrollCorrection .
“输入”监听器设置 scrollCorrection每次将文本输入到 textarea 时标记。请记住，这发生在随机滚动发生之前。
所以下一次滚动发生，这可能是令人讨厌的随机 Action ，滚动监听器将清除 scrollCorrection ，然后将 textarea 滚动到上一个滚动位置，即，将其滚动回“随机”滚动之前的位置。但问题是不可预测的，如果没有随机滚动并且下一次滚动是有意的怎么办？这没什么大不了的。这只是意味着如果用户手动滚动，第一个滚动事件基本上无效，但之后(清除 scrollCorrection)一切都会正常滚动。由于在正常滚动期间，事件会如此迅速地吐出，因此不太可能有任何明显的影响。
这是代码:

let textarea;
let prevScrollPos = 0;
let scrollCorrection = false;

function onScroll(evt) {
  if (scrollCorrection) {
    // Reset this right off so it doesn't get retriggered by the corrction.
    scrollCorrection = false;
    textarea.scrollTop = prevScrollPos;
  }
  prevScrollPos = textarea.scrollTop;
}

function onInput(evt) {
  scrollCorrection = true;
}

window.addEventListener("load", () => {
  textarea = document.getElementById("example_textarea");
  textarea.addEventListener("scroll", onScroll);
  textarea.addEventListener("input", onInput);
})

现在让我们扩展它:
还有另一个考虑。如果键入或粘贴操作将键入或粘贴的文本(以及插入符号)的结尾置于 textarea 视口(viewport)的 View 之外怎么办？当正常滚动时，大多数浏览器将滚动页面[2]，因此插入符号将保持在 View 中。但是现在我们已经接管了滚动操作，我们需要自己实现它。
在下面的伪代码中，在输入到 textarea 时，除了设置 scrollCorrection 外，我们还调用了一个函数，该函数将:

确定插入符相对于 textarea 视口(viewport)的 xy 位置

确定它是否滚出 View

如果是这样:

确定滚动量以使其可见

通过测试 scrollCorrection 的状态确定随机滚动是否已经发生

如果没有，设置包含滚动量的标志 scrollCorrection2

如果有，请明确进行额外的滚动以将其重新显示

在 textarea 中找到插入符号的 xy 位置不是一件小事，不在本答案的范围内，但是在搜索网络时可以找到很多方法。大多数涉及复制非表单元素中的 textarea 内容，例如 div 块，具有相似的字体、字体大小、文本换行等，然后使用 getBoundingClientRect在生成的包含块等上。在我的情况下，我已经为我的编辑做了大部分工作，所以这不是什么额外的费用。但是我已经包含了一些伪代码来展示如何在滚动校正机制中实现这一点。 setCaretCorrection基本上执行上面的步骤 1 - 7。

let textarea;
let prevScrollPos = 0;
let scrollCorrection = false;
let caretCorrection = 0;

function onScroll(evt) {
  if (scrollCorrection) {
    // Reset this right off so it doesn't get retriggered by the correction.
    scrollCorrection = false;
    textarea.scrollTop = prevScrollPos + caretCorrection;
    caretCorrection = 0;
  }

  prevScrollPos = textarea.scrollTop;
}

function onTextareaInput() {
  scrollCorrection = true;
  setCaretCorrection();
}

function setCaretCorrection(evt) {
  let caretPos = textarea.selectionStart;
  let scrollingNeeded;
  let amountToScroll;

  /* ... Some code to determine xy position of caret relative to
         textarea viewport, if it is scrolled out of view, and if
         so, how much to scroll to bring it in view. ... */

  if (scrollingNeeded) {
    if (scrollCorrection) {
      // scrollCorrection is true meaning random scroll has not occurred yet,
      // so flag the scroll listener to add additional correction. This method
      // won't cause a flicker which could happen if we scrollBy() explicitly.
      caretCorrection = amountToScroll;
    } else {
      // Random scroll has already occurred and been corrected, so we are
      // forced to do the additional "out of viewport" correction explicitly.
      // Note, in my situation I never saw this condition happen.
      textarea.scrollBy(0, amountToScroll);
    }
  }
}

可以更进一步，使用实验事件“beforeinput”[3] 来优化这一点，从而减少对 setCaretCorrection 的不必要调用。制作。如果检查event.data来自“beforeinput”事件，在某些情况下它会报告要输入的数据。如果没有，则输出 null .不幸的是，当输入换行符时，event.data是 null .但是，如果它们被粘贴，它会报告换行符。所以至少可以看到 event.data 是否包含字符串，如果字符串不包含换行符，则跳过整个更正操作。 (另外，请参见下面的 [1]。)
[1] 我也没有看到任何你不能在“beforeinput”[3] 监听器中做的事情，我们在“输入”监听器中做什么。这也可能给我们设置的更多保险scrollCorrection在随机滚动发生之前。尽管请注意“beforeinput”是实验性的。
[2] 我怀疑是这个功能的错误实现导致了这个问题。
[3] https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event (根据此链接，可在 Chrome 和除 Firefox 之外的所有主要浏览器上使用。)