I'm trying to implement image lazy loading for a side project using intersection observer API , the problem that i'm facing is that no matter how i'm adjusting the rootMargin for the x-axis (e.g '0px 300px 0px 0px) , the intersection seems to only happen on the viewport .
Expected: Image to be loaded when intersecting 300px away before entering the viewport .
Result: Image only loads when intersecting at viewport , which rootMargin seems to not be working on horizontal level.
Here is an example:
```https://codepen.io/daniel-yeh/pen/WNEzJWe?editors=1111```
Really hope that someone could help with this one , have absolutely no idea....