Hyperscript Demo: Linked Scroll

linked_scroll.html

<style>
  main {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr 1fr;
  }
  .column {
    max-block-size: 200px;
    overflow: auto;
    border: 2px inset plum;
    border-radius: 1em;
  }
</style>
<script type=hyperscript>
behavior LinkedScroll
 init
    set my @data-scrolling to 'false'
  end
  on scroll
    if my @data-scrolling is 'false'
      for el in <[data-scrolling]/>
        if el is not me
          set el's @data-scrolling to 'true'
          set el's scrollTop to my scrollTop
          set el's scrollLeft to my scrollLeft
        end
      end
    end
    set my @data-scrolling to 'false'
  end
end
</script>

<main>
  <pre class="column" _="install LinkedScroll">
    1| Some text
    2| Some more text
    3| Some text
    4| Some more text
    5| Some text
    6| Some more text
    7| Some text
    8| Some more text
    9| Some text
   10| Some more text
   11| Some text
   12| Some more text
   13| Some text
   14| Some more text
   15| Some text
   16| Some more text
   17| Some text
   18| Some more text
   19| Some text
   20| Some more text
   21| Some text
   22| Some more text
   23| Some text
   24| Some more text
   25| Some final text
  </pre>
  <pre class="column" _="install LinkedScroll">
    1| Some text
    2| Some more text
    3| Some text
    4| Some more text
    5| Some text
    6| Some more text
    7| Some text
    8| Some more text
    9| Some text
   10| Some more text
   11| Some text
   12| Some more text
   13| Some text
   14| Some more text
   15| Some text
   16| Some more text
   17| Some text
   18| Some more text
   19| Some text
   20| Some more text
   21| Some text
   22| Some more text
   23| Some text
   24| Some more text
   25| Some final text
  </pre>
</main>