Also stabilize parent elements' scroll position

FIX: Perform scroll stabilization on the document or wrapping
scrollable elements, when the user scrolls the editor.

Author: marijnh

src/dom.ts

@@ -208,14 +208,14 @@ export function scrollRectIntoView(dom: HTMLElement, rect: Rect, side: -1 | 1,
   }
 }
 
-export function scrollableParents(dom: HTMLElement) {
-  let doc = dom.ownerDocument, x: HTMLElement | undefined, y: HTMLElement | undefined
+export function scrollableParents(dom: HTMLElement, getX = true) {
+  let doc = dom.ownerDocument, x: HTMLElement | null = null, y: HTMLElement | null = null
   for (let cur = dom.parentNode as HTMLElement | null; cur;) {
-    if (cur == doc.body || (x && y)) {
+    if (cur == doc.body || ((!getX || x) && y)) {
       break
     } else if (cur.nodeType == 1) {
       if (!y && cur.scrollHeight > cur.clientHeight) y = cur
-      if (!x && cur.scrollWidth > cur.clientWidth) x = cur
+      if (getX && !x && cur.scrollWidth > cur.clientWidth) x = cur
       cur = cur.assignedSlot || cur.parentNode as HTMLElement | null
     } else if (cur.nodeType == 11) {
       cur = (cur as any).host
@@ -340,7 +340,8 @@ export function atElementStart(doc: HTMLElement, selection: SelectionRange) {
   }
 }
 
-export function isScrolledToBottom(elt: HTMLElement) {
+export function isScrolledToBottom(elt: HTMLElement | Window) {
+  if (elt instanceof Window) return elt.pageYOffset > Math.max(0, elt.document.documentElement.scrollHeight - elt.innerHeight - 4)
   return elt.scrollTop > Math.max(1, elt.scrollHeight - elt.clientHeight - 4)
 }
 

src/editorview.ts

@@ -125,7 +125,7 @@ export class EditorView {
   get root() { return this._root }
 
   /// @internal
-  get win() { return this.dom.ownerDocument.defaultView || window }
+  get win(): Window { return this.dom.ownerDocument.defaultView || window }
 
   /// The DOM element that wraps the entire editor view.
   readonly dom: HTMLElement
@@ -200,7 +200,7 @@ export class EditorView {
     this.dispatch = this.dispatch.bind(this)
     this._root = (config.root || getRoot(config.parent) || document) as DocumentOrShadowRoot
 
-    this.viewState = new ViewState(config.state || EditorState.create(config))
+    this.viewState = new ViewState(this, config.state || EditorState.create(config))
     if (config.scrollTo && config.scrollTo.is(scrollIntoView))
       this.viewState.scrollTarget = config.scrollTo.value.clip(this.viewState.state)
     this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec))
@@ -358,7 +358,7 @@ export class EditorView {
     let hadFocus = this.hasFocus
     try {
       for (let plugin of this.plugins) plugin.destroy(this)
-      this.viewState = new ViewState(newState)
+      this.viewState = new ViewState(this, newState)
       this.plugins = newState.facet(viewPlugin).map(spec => new PluginInstance(spec))
       this.pluginMap.clear()
       for (let plugin of this.plugins) plugin.update(this)
@@ -421,25 +421,25 @@ export class EditorView {
     if (flush) this.observer.forceFlush()
 
     let updated: ViewUpdate | null = null
-    let sDOM = this.scrollDOM, scrollTop = sDOM.scrollTop * this.scaleY
+    let scroll = this.viewState.scrollParent, scrollOffset = this.viewState.getScrollOffset()
     let {scrollAnchorPos, scrollAnchorHeight} = this.viewState
-    if (Math.abs(scrollTop - this.viewState.scrollTop) > 1) scrollAnchorHeight = -1
+    if (Math.abs(scrollOffset - this.viewState.scrollOffset) > 1) scrollAnchorHeight = -1
     this.viewState.scrollAnchorHeight = -1
 
     try {
       for (let i = 0;; i++) {
         if (scrollAnchorHeight < 0) {
-          if (isScrolledToBottom(sDOM)) {
+          if (isScrolledToBottom(scroll || this.win)) {
             scrollAnchorPos = -1
             scrollAnchorHeight = this.viewState.heightMap.height
           } else {
-            let block = this.viewState.scrollAnchorAt(scrollTop)
+            let block = this.viewState.scrollAnchorAt(scrollOffset)
             scrollAnchorPos = block.from
             scrollAnchorHeight = block.top
           }
         }
         this.updateState = UpdateState.Measuring
-        let changed = this.viewState.measure(this)
+        let changed = this.viewState.measure()
         if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null) break
         if (i > 5) {
           console.warn(this.measureRequests.length
@@ -484,10 +484,13 @@ export class EditorView {
             } else {
               let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height :
                 this.viewState.lineBlockAt(scrollAnchorPos).top
-              let diff = newAnchorHeight - scrollAnchorHeight
-              if (diff > 1 || diff < -1) {
-                scrollTop = scrollTop + diff
-                sDOM.scrollTop = scrollTop / this.scaleY
+              let diff = (newAnchorHeight - scrollAnchorHeight) / this.scaleY
+              if ((diff > 1 || diff < -1) &&
+                  (scroll == this.scrollDOM || this.hasFocus ||
+                   Math.max(this.inputState.lastWheelEvent, this.inputState.lastTouchTime) > Date.now() - 100)) {
+                scrollOffset = scrollOffset + diff
+                if (scroll) scroll.scrollTop += diff
+                else this.win.scrollBy(0, diff)
                 scrollAnchorHeight = -1
                 continue
               }

src/input.ts

@@ -16,6 +16,7 @@ export class InputState {
   lastFocusTime = 0
   lastScrollTop = 0
   lastScrollLeft = 0
+  lastWheelEvent = 0
 
   // On iOS, some keys need to have their default behavior happen
   // (after which we retroactively handle them and reset the DOM) to
@@ -495,6 +496,10 @@ observers.scroll = view => {
   view.inputState.lastScrollLeft = view.scrollDOM.scrollLeft
 }
 
+observers.wheel = observers.mousewheel = view => {
+  view.inputState.lastWheelEvent = Date.now()
+}
+
 handlers.keydown = (view, event: KeyboardEvent) => {
   view.inputState.setSelectionOrigin("select")
   if (event.keyCode == 27 && view.inputState.tabFocusMode != 0) view.inputState.tabFocusMode = Date.now() + 2000

src/viewstate.ts

@@ -1,5 +1,5 @@
 import {Text, EditorState, ChangeSet, ChangeDesc, RangeSet, EditorSelection} from "@codemirror/state"
-import {Rect, isScrolledToBottom, getScale} from "./dom"
+import {Rect, isScrolledToBottom, getScale, scrollableParents} from "./dom"
 import {HeightMap, HeightOracle, BlockInfo, MeasuredHeights, QueryType, heightRelevantDecoChanges,
         clearHeightChangeFlag, heightChangeFlag} from "./heightmap"
 import {decorations, outerDecorations, ViewUpdate, UpdateFlag, ChangedRange, ScrollTarget, nativeSelectionHidden,
@@ -120,12 +120,17 @@ export class ViewState {
   contentDOMHeight = 0 // contentDOM.getBoundingClientRect().height
   editorHeight = 0 // scrollDOM.clientHeight, unscaled
   editorWidth = 0 // scrollDOM.clientWidth, unscaled
-  scrollTop = 0 // Last seen scrollDOM.scrollTop, scaled
-  scrolledToBottom = false
   // The CSS-transformation scale of the editor (transformed size /
   // concrete size)
   scaleX = 1
   scaleY = 1
+
+  // The nearest vertically-scrollable parent. null means window is nearest
+  scrollParent: HTMLElement | null
+  // Last seen vertical offset of the element at the top of the scroll
+  // container, or top of the window if there's no wrapping scroller
+  scrollOffset = 0
+  scrolledToBottom = false
   // The vertical position (document-relative) to which to anchor the
   // scroll position. -1 means anchor to the end of the document.
   scrollAnchorPos = 0
@@ -169,7 +174,7 @@ export class ViewState {
   // the right place.
   mustEnforceCursorAssoc = false
 
-  constructor(public state: EditorState) {
+  constructor(public view: EditorView, public state: EditorState) {
     let guessWrapping = state.facet(contentAttributes).some(v => typeof v != "function" && v.class == "cm-lineWrapping")
     this.heightOracle = new HeightOracle(guessWrapping)
     this.stateDeco = staticDeco(state)
@@ -182,6 +187,7 @@ export class ViewState {
     this.updateViewportLines()
     this.lineGaps = this.ensureLineGaps([])
     this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(this, false)))
+    this.scrollParent = view.scrollDOM
     this.computeVisibleRanges()
   }
 
@@ -222,7 +228,7 @@ export class ViewState {
     let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(
       prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)))
     let prevHeight = this.heightMap.height
-    let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollTop)
+    let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollOffset)
     clearHeightChangeFlag()
     this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc,
                                                  this.heightOracle.setDoc(this.state.doc), heightChanges)
@@ -258,8 +264,8 @@ export class ViewState {
       this.mustEnforceCursorAssoc = true
   }
 
-  measure(view: EditorView) {
-    let dom = view.contentDOM, style = window.getComputedStyle(dom)
+  measure() {
+    let {view} = this, dom = view.contentDOM, style = window.getComputedStyle(dom)
     let oracle = this.heightOracle
     let whiteSpace = style.whiteSpace!
     this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR
@@ -294,12 +300,18 @@ export class ViewState {
       this.editorWidth = view.scrollDOM.clientWidth
       result |= UpdateFlag.Geometry
     }
-    let scrollTop = view.scrollDOM.scrollTop * this.scaleY
-    if (this.scrollTop != scrollTop) {
+    let scrollParent = scrollableParents(this.view.contentDOM, false).y
+    if (scrollParent != this.scrollParent) {
+      this.scrollParent = scrollParent
       this.scrollAnchorHeight = -1
-      this.scrollTop = scrollTop
+      this.scrollOffset = 0
     }
-    this.scrolledToBottom = isScrolledToBottom(view.scrollDOM)
+    let scrollOffset = this.getScrollOffset()
+    if (this.scrollOffset != scrollOffset) {
+      this.scrollAnchorHeight = -1
+      this.scrollOffset = scrollOffset
+    }
+    this.scrolledToBottom = isScrolledToBottom(this.scrollParent || view.win)
 
     // Pixel viewport
     let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop)
@@ -581,9 +593,15 @@ export class ViewState {
                  this.scaler)
   }
 
-  scrollAnchorAt(scrollTop: number) {
-    let block = this.lineBlockAtHeight(scrollTop + 8)
-    return block.from >= this.viewport.from || this.viewportLines[0].top - scrollTop > 200 ? block : this.viewportLines[0]
+  getScrollOffset() {
+    let base = this.scrollParent == this.view.scrollDOM ? this.scrollParent.scrollTop
+      : (this.scrollParent ? this.scrollParent.getBoundingClientRect().top : 0) - this.view.contentDOM.getBoundingClientRect().top
+    return base * this.scaleY
+  }
+
+  scrollAnchorAt(scrollOffset: number) {
+    let block = this.lineBlockAtHeight(scrollOffset + 8)
+    return block.from >= this.viewport.from || this.viewportLines[0].top - scrollOffset > 200 ? block : this.viewportLines[0]
   }
 
   elementAtHeight(height: number): BlockInfo {