如何使此 div scrollTop 值与 textarea 的值匹配？

Question

我正在使用 div 来格式化和显示来自等尺寸文本区域的文本，我需要它们永久同步。 但是，在输入文本超过文本区域底部后，我无法同步它们各自的 scrollTops。

我的过程与此处描述的过程类似，但我无法让他的解决方案在我的项目中发挥作用。

这是最少相关代码的演示和片段：

<section>
  <div class="input-text__container">
    <div id="input-text--mirror" class="input-text"></div>
      <textarea
        id="input-text--original"
        cols="30"
        rows="6"
        autofocus
        class="input-text"
        placeholder="Enter your text here"
        autocomplete="off"
        autocorrect="off"
        spellcheck="false"
      ></textarea>
  </div>
<section>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

html {
  font-size: 62.5%;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: inherit;
  vertical-align: baseline;
}

body {
  height: 100vh;
}

section {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1rem;
}

.input-text__container {
  width: 100%;
  position: relative;
  flex: 1;
}

.input-text {
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 3.2rem;
  overflow-wrap: break-word;
  font-family: "Inter";
}

#input-text--mirror {
  background-color: #e9ecf8;
  color: #0a3871;
  overflow: hidden;
}

#input-text--original {
  background-color: transparent;
  -webkit-text-fill-color: transparent;
  resize: none;
  outline: none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

#input-text--original::placeholder {
  color: #e9ecf8;
  -webkit-text-fill-color: #052051;
}

#input-text--original::selection {
  -webkit-text-fill-color: #ffffff;
}

.invalid {
  font-weight: 400;
  color: #ff0000;
}

#input-text--original::-webkit-scrollbar {
  display: none;
}

let invalidInput = false;
const patterns = {
  valid: "a-z ",
  invalid: "[^a-z ]",
  linebreaks: "\r|\r\n|\n",
};
const textIn = document.querySelector("#input-text--original");
const mirror = document.querySelector("#input-text--mirror");

function validateInput(string, className) {
  let anyInvalidChar = false;

  // Generate regular expressions for validation
  const regExpInvalids = new RegExp(patterns.invalid, "g");
  const regExpLinebreaks = new RegExp(patterns.linebreaks);

  // Generate innerHTML for mirror
  const mirrorContent = string.replace(regExpInvalids, (match) => {
    if (regExpLinebreaks.test(match)) {
      return "<br/>";
    } else {
      anyInvalidChar = true;
      return `<span class=${className}>${match}</span>`;
    }
  });
  // Update mirror
  mirror.innerHTML = mirrorContent;

  return anyInvalidChar;
}

textIn.addEventListener("input", (e) => {
  const plain = textIn.value;
  const newInputValidity = validateInput(plain, "invalid");
  mirror.scrollTop = textIn.scrollTop;
});

textIn.addEventListener(
  "scroll",
  () => {
    mirror.scrollTop = textIn.scrollTop;
  },
  { passive: true }
);

在桌面屏幕上键入列中的前 8 个自然数应该足以重现该问题。

我检查的最后一件事，但也许到目前为止最相关的是这个。 它似乎在 React 上处理完全相同的问题，但恐怕我不知道如何使该解决方案适应 Vanilla JavaScript，因为我才刚刚开始学习 React。 请注意，我正在尝试寻找一种不依赖于 jQuery 或 React 等库的解决方案。

除此之外，我通过替换return "<br/>";尝试了上述博客中描述的解决方案； return "<br/>&nbsp;"; 在我的validateInput function 中，但这没有用。 我还在 append 中添加了一个条件，一个空格到plain in const plain = textIn.value; 如果最后一个字符是换行符，但我没有运气。

我还在mirror.scrollTop = textIn.scrollTop; 在 textIn 滚动处理程序中跟踪每个 scrollTop 的值，即使它们不同，镜像 scrollTop 也没有更新。 我读到这可能是因为默认情况下 div 不可滚动，但是将“溢出：滚动”添加到其 styles 也没有解决问题。

我阅读了与 scrollTop 相关的其他属性，如offsetTop 和 pageYOffset ，但它们要么是只读的，要么没有为 div 定义。

我也查看了以下帖子/站点，但仍然无法解决此问题。

• https://codepen.io/Goweb/pen/rgrjWx
• https://stackoverflow.com/questions/68092068/making-two-textareas-horizontally-scroll-in-sync
• 同时滚动 2 个不同的元素
• 反应：设置 div 的 scrollTop 属性不起作用
• 文本区域输入和突出显示容器的同步滚动
• .scrollTop(0) 无法让 div 滚动到顶部
• 如何将滚动事件附加到文本输入？

我不再记得我还审查了什么，但没有任何效果，我不再知道还能做什么。 感谢您的关注和帮助。

Answer 1

在尝试复制我在帖子中提到的 React 应用程序的解决方案后，使用 vanilla JavaScript （此处演示） ，我尝试将其应用于我自己的项目，我所要做的就是向mirror添加一个<br>标签在我的validateInput function 的末尾。即： mirror.innerHTML = mirrorContent + "<br>"; .

除此之外，不需要在每次触发 textarea 上的输入事件时更新镜像的 scrollTop。 也不是将{ passive: true }参数传递给滚动事件。

修改后的代码在这里：

function validateInput(string, className) {
  let anyInvalidChar = false;

  // Generate regular expressions for validation
  const regExpInvalids = new RegExp(patterns.invalid, "g");
  const regExpLinebreaks = new RegExp(patterns.linebreaks);

  // Generate innerHTML for mirror
  const mirrorContent = string.replace(regExpInvalids, (match) => {
    if (regExpLinebreaks.test(match)) {
      return "<br/>";
    } else {
      anyInvalidChar = true;
      return `<span class=${className}>${match}</span>`;
    }
  });
  // Update mirror
  mirror.innerHTML = mirrorContent + "<br>";

  return anyInvalidChar;
}

textIn.addEventListener("input", (e) => {
  const plain = textIn.value;
  const newInputValidity = validateInput(plain, "invalid");
});

textIn.addEventListener("scroll", () => mirror.scrollTop = textIn.scrollTop);