https://railsblocks.com/assets/controllers/scroll_preservation_con…f9f543233a9b6e77ac0d7b1d84c86631ba5b9d7c.js

1import { Controller } from "@hotwired/stimulus";
2
3// Connects to data-controller="scroll-preservation"
4export default class extends Controller {
5  connect() {
6    if (!window.scrollPositions) {
7      window.scrollPositions = {};
8    }
9
10    // Bind event listeners
11    this.preserveScroll = this.preserveScroll.bind(this);
12    this.restoreScroll = this.restoreScroll.bind(this);
13
14    window.addEventListener("turbo:before-cache", this.preserveScroll);
15    window.addEventListener("turbo:before-render", this.restoreScroll);
16    window.addEventListener("turbo:render", this.restoreScroll);
17  }
18
19  disconnect() {
20    // Clean up event listeners
21    window.removeEventListener("turbo:before-cache", this.preserveScroll);
22    window.removeEventListener("turbo:before-render", this.restoreScroll);
23    window.removeEventListener("turbo:render", this.restoreScroll);
24  }
25
26  preserveScroll() {
27    document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
28      if (element.id) {
29        window.scrollPositions[element.id] = element.scrollTop;
30      }
31    });
32  }
33
34  restoreScroll(event) {
35    document.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
36      if (element.id && window.scrollPositions[element.id] !== undefined) {
37        element.scrollTop = window.scrollPositions[element.id];
38      }
39    });
40
41    if (!event.detail || !event.detail.newBody) return;
42
43    // event.detail.newBody is the body element to be swapped in.
44    // https://turbo.hotwired.dev/reference/events
45    event.detail.newBody.querySelectorAll("[data-preserve-scroll]").forEach((element) => {
46      if (element.id && window.scrollPositions[element.id] !== undefined) {
47        element.scrollTop = window.scrollPositions[element.id];
48      }
49    });
50  }
51};