How to create a marquee component with dynamic content generation/removal?

Question

JavaScript

Hey! The task is not trivial and it will be difficult to explain it in words, but I will try: you need to fill the visible part of the block with elements, the elements must scroll, and when scrolling, you need to generate new ones, while those that are out of sight must be deleted.

In terms of functionality, it’s like a running line, but a little more complicated.

I thought that IntersectionObserver would be a good fit for this, but it only executes the function passed to it once when it enters the field of view. Therefore, it is only suitable for cases where some elements already exist and are scrolling.

The problem arises with the initial filling of the block - i.e. you need to fill the entire visible area, but no more.

Because It is difficult to describe, for clarity I give an example.


Sometimes it becomes necessary to scroll such blocks manually, including in both directions, and also with dynamic content generation / deletion, maybe someone knows a solution for such cases?

In this case, the scrolling is automatic and for sure the solution will be simpler than for manual scrolling.

Answer 1

https://dev.to/adamklein/build-your-own-virtual-sc...