Element's horizontal scroll position snaps back when scrolling the document vertically

[jenky]

What did you expect? 🧐

It should not snap back to the start when scrolling in the opposite direction.

What actually happened? 😵‍💫

I have 2 elements with overflow-x and using scroll mirror to sync the scroll horizontally. It works, but as soon as I scroll vertically, the horizontal scroll snaps back to the start

{ vertical: false, horizontal: true }

Screen.Recording.2024-10-17.at.23.40.48.mov

What browsers are you seeing the problem on? 🧭

Chrome

Relevant log output 🤓

No response

URL to minimal reproduction 🔗

N/A

Checked all these? 📚

• I have read the usage instructions
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[hirasso]

Hi @jenky , thanks for your report! Could you create a minimal reproduction of the bug? You can fork this pen on codepen: https://codepen.io/rassohilber/pen/JjxwJpo

[jenky]

@hirasso Here is the reproduction https://codesandbox.io/p/sandbox/ptscft

[hirasso]

Thank you @jenky!

In your code, you are also adding :root to the mirrored elements. That's the reason why when scrolling the document vertically, the horizontal scroll container correctly snaps back to zero, as the document's scrollLeft is zero. Removing :root fixes the problem:

- document.querySelectorAll(":root, .comparison-container", {
+ document.querySelectorAll(".comparison-container", {
  vertical: false,
  horizontal: true,
})

If you like this library, please give it a star! It dearly needs some 🙂

[hirasso]

@jenky did this answer your question?

[jenky]

Ah yep, thank you so much. My notification directed me to the original issue that is closed, and I thought I couldn't leave a message. I didn't realize it had been converted to a discussion.