強制頁面滾動到移動設備上的 textarea

Question

我開發了一個文本編輯器 PWA，它的 textarea 使用overflow-y = scroll占用整個顯示器（ position:absolute; width/height = 100% ）。

通常——大約 10 次中有 9 次——當我的手指上下滑動時，滾動發生在文本區域內，這是預期的結果。

然而，在極少數情況下，滾動應用到頁面本身——而不是文本區域。 導致頂部和底部立即出現橡皮筋彈跳，而無需滾動文本區域內的實際內容。

有沒有辦法對文本區域強制執行任何滾動事件？

Answer 1

這可能是由於抓取了頁面元素（或位於 textarea 滾動的“開始/結束”）而不是 textarea 本身。

一個解決方案可能是修復“html”和“body”標簽並將它們的寬度和高度設置為 100%，同時為position: fixed ，使這些元素沒有滾動空間。

html,
body {
  position: fixed;
  width: 100%;
  height: 100%;
}