Infinity scroll

Hi:)

We are working on implementing something similar to infinity scroll from the Use Cases in dPlan. The difference is that in our case the scroll is horizontal and we use a container both on the right and left side that triggers an action with On Viewport Enter that loads more columns of data.
For example, we have 100 columns in total and instead of loading the 30 first columns we load and display 30 columns in the middle, let’s say column number 30-60, where column number 40-50 is visible and you can scroll 10 columns to each side. When you scroll to the end of each side an action to load 10 more columns on that side is triggered by viewing a container.

The issue is that it behaves differently on the left and on the right side. On the right side, it behaves as in the example in Use Cases with 10 more columns being loaded and you can scroll further. On the left side, the same action is triggered, 10 columns to the left are loaded, and where your view is also shifted 10 to the left. Example: A user scrolls to see columns 30-40, this triggers an action to load columns 20-30. In addition, what the users see is shifted 10 columns from 30-40 to 20-30 – something that is not happening on the right side.

I think I understand why this is happening, but my question is if it’s possible to make the left and right side behaves in the same way. Ideally, make the left behave the same way as the right side, but the other way around is also ok.

Video is too big to be uploaded here, you can find it in Slack. Let me know if anything is unclear:)

2023-01-06 16-36-11.mkv (1.3 MB)

This is the video (mkv files are not previewed, mp4 is better)

1 Like

Based on quick research, it is not related to the on view port enter. If you have scrolled to the left of a horizontal scrollable container, and something triggers “content to the left” to be visible, the scroll will automatically take you to the left the same number of pixels as the witdth of this content.

Not sure if this is HTML behaviour or is there is a way around this when programming, does anyone know?