twobin / react-lazyload

Lazy load your component, image or anything matters the performance.
MIT License
5.85k stars 487 forks source link

not working if container element is in fullscreen mode #355

Open JoenZhu opened 3 years ago

JoenZhu commented 3 years ago

My code just like this

function A ()  {
  const [imgs] = React.useState(Array(20).fill('').map((_, i) => i))

  const fullscreen = React.useCallback(() => {
    const container = document.querySelector('#container');
    container.requestFullscreen();
  }, []);

  return (
    <div id="container" onClick={fullscreen}>
      {imgs.map((img, index) => (
        <LazyLoad height={200}> key={index}>
          <Img />
        </LazyLoad>
      ))}
    </div>
  )
}

when container element on fullscreen mode, LazyLoad will not working

kyoungholee commented 3 months ago
  1. Using the scrollContainer Properties You can use the scrollContainer attribute to specify which elements LazyLoad detects scroll events, which works in full-screen mode as LazyLoad calculates visibility within a particular element.

`

`

Please insert the id to scroll through.