僅在Chrome中出現問題。

我遇到了不良的瀏覽器行為，在contenteditable div中鍵入內容時，其高度向上增加——瀏覽器似乎自動向上滾動。有什么方法可以防止滾動行為，因為它會導致不良的UX。

請參見下面的示例，該示例說明了這樣一個問題，即在第一次向下滾動并嘗試鍵入直到在包含插入文本的# bottom-child中創建新行時，滾動條會自動上升。在運行代碼片段后，在可選擇的全頁模式下更容易重現此問題。

#parent {
  height: 2000px;
}

#container {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 200px;
  background-color: yellow;
}

#top-child {
  flex: 1;
}

#bottom-child {
  align-self: flex-end;
  width: 100%;
}

<div id="parent">
  Please scroll down a little bit and type in text in the 'Insert text' area to see the automatic scroll.
  <div id="container">
    <div id="top-child"></div>
    <div id="bottom-child" contenteditable="true">Insert text</div>
  </div>
</div>

我想出了一個解決這個問題的方法，我們可以識別自動滾動即將發生，并通過編程強制滾動到原始位置。這是通過獲取keydown上的原始scrollY，然后獲取keydown之后直接觸發的新scrollY on輸入來實現的。如果它們與原始卷軸不匹配。

然而，這是相對粗糙的，其他替代方案是受歡迎的。

解決方案:

function preventAutomaticScrollUpOnNewLine(bottomChildDiv) {
    let scrollY;
    bottomChildDiv.addEventListener('keydown', () => {
        scrollY = window.scrollY;
    });
    bottomChildDiv.addEventListener('input', () => {
        if (scrollY !== window.scrollY) {
            window.scrollTo({top: scrollY});
        }
    });
}