Infinite split scrolling (in opposite directions) columns

JavaScript
1

I have a a 100% height page with 2 columns of content. On mouse scroll, both columns scroll - but in opposite directions. This loops/scrolls infinitely.

I have this working in principle but with a few issues. I’d also like to see what people think of the code/if it can be optimised as it’s a bit of a hack job…

Here is my code: https://codepen.io/moy/pen/OJvgMXN

  • If the viewport is resized even slightly the layout seems to break/overflow until refresh. So I think I need to work in something so it’s always updated. I know it’s a performance hit but this is a ‘fun’ portfolio-like UI so it’s ok to push it a bit
  • NewMap / WeakMap errors I can’t resolve - although it works
  • Both columns don’t perfectly align, you can see a bit of the border of the item outside the viewport (bottom edge).
  • Not vital but I thought about what an ‘offset’ would look like so rather than 2 items fitting in the viewport, you saw the top of one item and the bottom of another in a column.

I moved away from jQuery but for reference this was an older version I did / where it all started.

2

I tried to add the following so on window resize the function was recalculated (and adjusted/corrected) but that doesn’t seem to do it.

window.addEventListener('resize', infiniteScrollHandler);

Anyone have any ideas, am I targeting the wrong thing/does the entire thing need to be a ‘function’ to I target the entire thing? Not sure if scrollHeight and offsetBoundary are playing a part here and/or if adjusting those would achieve an offset (so div aren’t aligned perfectly to the top of the window)?

3

I haven’t ignored your post as I remember your previous thread but the JS really needs an expert to look over.

I can see your issue with resizing as the image splits into many parts. I would guess that rather than just calling the infinite scrollhandler on resize you would need to do a complete reset and remove all the dynamic styles and start afresh when the page was resized.

I can see a top black border and a bottom black border on both the columns initially. I don’t see a mismatch (in chrome).

I was also seeing the right column stop scrolling sometimes and the left column continued to scroll. It seemed to happen when scrolling with the mouse over the left column at the time. I couldn’t narrow it down though.

The scrolling effect does seem to be mostly working though so I think you are close.

Hopefully a JS guru will drop by and offer some expert advice :slight_smile:

2 Likes
4

Ah thanks man!

The mismatch, I kinda realised I could do a calc(100vh + 2px) so the borders are out of the viewport. As I was using box-sizing.

And to be honest this is such a mad (maybe?) UI that I actually wouldn’t want to waste peoples time too as unless I’m dead close to a solution it’s definitely a paid freelance job - so not wanting to take the p*ss!

Thanks as always!

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.