防止在更改时滚动到焦点输入/文本区域元素

Question

我在这里做了一个快速沙箱来演示。

 const btn = document.querySelector("button") const topTextarea = document.querySelector("#input1") topTextarea.addEventListener("change", (e) => { e.preventDefault(); e.stopPropagation() }) topTextarea.addEventListener("keyup", (e) => { // e.preventDefault(); e.stopPropagation() }) topTextarea.addEventListener("keydown", (e) => { e.preventDefault(); e.stopPropagation() }) btn.addEventListener("click", () => { topTextarea.focus({ preventScroll: true }); })

 body { display: flex; justify-content: center; flex-direction: column; } textarea { height: 100px; } #demo { height: 3000px; }

 <textarea name="" id="input1" cols="30" rows="10">asdaasdasdsadasd</textarea> <div id="demo"></div> <button>Scroll Top element</button> <textarea name="" id="" cols="30" rows="10">Bottom</textarea>

问题：关注页面上的任何文本区域。 滚动出它们（当它们集中注意力时）然后输入一些东西。 发生默认行为，页面滚动到焦点元素。

在沙箱中，您可以看到一个触发焦点但阻止滚动的按钮。

是否可以实现，以便在发生更改时防止滚动？

Answer 1

我找到了解决方案。

防止 keyDown 事件。 收集输入的字符并更新您的“状态”。

您可以进行一些计算并滚动到元素。

对于我的情况，scrollIntoView 导致我们的设计出现问题，这就是我必须手动滚动的原因。