once-campfire/app/javascript/controllers/maintain_scroll_controller.js

import { Controller } from "@hotwired/stimulus"
import ScrollManager from "models/scroll_manager"

export default class extends Controller {
  #scrollManager

  connect() {
    this.#scrollManager = new ScrollManager(this.element)
  }

  // Actions

  beforeStreamRender(event) {
    const shouldKeepScroll = event.detail.newStream.hasAttribute("maintain_scroll")
    const render = event.detail.render
    const target = event.detail.newStream.getAttribute("target")
    const targetElement = document.getElementById(target)

    if (this.element.contains(targetElement) && shouldKeepScroll) {
      const top = this.#isAboveFold(targetElement)
      event.detail.render = async (streamElement) => {
        this.#scrollManager.keepScroll(top, () => render(streamElement))
      }
    }
  }

  // Internal

  #isAboveFold(element) {
    return element.getBoundingClientRect().top < this.element.clientHeight
  }
}