How to use Lazyload with images in scrollable DIV? What is root for?

[q2apro]

I have not a scrollable body, but a scrollable DIV.

Since the scrolling does not happen on the body, the lazyload images are not loaded.

I have seen:

new LazyLoad(images, {
     root: null,
     rootMargin: "0px",
     threshold: 0
});

But in the readme/doc there is not mentioned what root is.

Can I just define the div for root, e.g. root: $('.wrapper'),?

[jadiagaurang]

Hi @q2apro

The Library is using Intersection Observer API to check whether HTML elements are in the viewport or not!

Per the MDN docs, root is The element used as the viewport for checking the target's visibility. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.

[q2apro]

In other words, defining a DIV would be valid.

From their website:

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0px",
  threshold: 1.0,
};

[jadiagaurang]

Yes, it should be valid! 👌🏼

[q2apro]

I have finally tried it, but it does not work. No lazy load trigger when I scroll the DIV up/down.

I have a fixed width and height for the DIV and use CSS overflow-x: auto;.

I had problems with CSS's overflow in the past, so maybe it is also the culprit here.

I could not find issues searching the net, just this here: https://stackoverflow.com/questions/72077165/using-intersectionobserver-instead-of-onscroll-event

Update: I also posted this issue at https://stackoverflow.com/q/77313611/1066234