Make 2 elements scroll together

[ThatOneCalculator]

I have 2 html elements that I want to scroll together whenever the scroll wheel is touched, is there any way to link them up?

[idiotWu]

Assuming the two elements have exactly the same layout, you can try:

one.addListener(({ offset }) => {
  two.setPosition(offset.x, offset.y);
});

// add this if necessary
two.addListener(({ offset }) => {
  one.setPosition(offset.x, offset.y);
});

[ThatOneCalculator]

Can you provide a demo?

As of right now, I've disabled smooth scrollbar on the page, but if you look at it, the line numbers and the text content are two separate elements and should scroll together.
https://stepbro.voring.me/~/f9SNJLQ

[idiotWu]

Thanks for the demo! Just wondering if it's possible to wrap the two components together into the same container, i.e.

<Scrollbar>
  <LineNum />
  <Code />
</Scrollbar>

[ThatOneCalculator]

Thanks for the demo! Just wondering if it's possible to wrap the two components together into the same container, i.e.

<Scrollbar>
  <LineNum />
  <Code />
</Scrollbar>

Nah, when you do, the line numbers appear before the text vertically.
I'm sure that could be fixed in the CSS, but I'm not the best front-end dev ^^"

[idiotWu]

Fix 1: init scrollbar on .wrapper and apply flex layout to .scroll-content

.wrapper .scroll-content {
  display: flex;
}

Fix 2: wrap the .wrapper into another element

<main class="scrollbar-container">
  <div class="wrapper"> ... </div>
</main>

.scrollbar-container {
  height: 100%;
}

.wrapper {
  /* height: calc(100% - 2rem); */ <- remove this
}

Scrollbar.init(document.querySelector('.scrollbar-container'))

[ThatOneCalculator]

Works great, thank you!