"overflow" and "resize" won't work together

This issue has been tracked since 2020-12-25.

It seems that this part of the code has caused this bug. When the prop "overflow" is set, the code doesn't add resize listener.

if (this.props.overflow) {
  const parent = scrollParent(this.ref);
  if (parent && typeof parent.getAttribute === 'function') {
    const listenerCount = 1 + +parent.getAttribute(LISTEN_FLAG);
    if (listenerCount === 1) {
      parent.addEventListener('scroll', finalLazyLoadHandler, passiveEvent);
    }
    parent.setAttribute(LISTEN_FLAG, listenerCount);
  }
} else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
  const { scroll, resize } = this.props;

  if (scroll) {
    on(scrollport, 'scroll', finalLazyLoadHandler, passiveEvent);
  }

  if (resize) {
    on(window, 'resize', finalLazyLoadHandler, passiveEvent);
  }
}
TanyaTPG wrote this answer on 2021-11-12

Is this solved by now?

TanyaTPG wrote this answer on 2021-11-12

I am having the same issue, when I have specified overflow prop, and window resize event doesn't load unless I scroll the container div's scroller.
Please provide details on solution to this problem..

g1091541365 wrote this answer on 2022-06-29

I've solved this problem by using the utility forceCheck. Every time the window resizes, I call it manualy. It seems wirely, but it helps indeed.

More Details About Repo
Owner Name twobin
Repo Name react-lazyload
Full Name twobin/react-lazyload
Language JavaScript
Created Date 2015-08-07
Updated Date 2022-11-29
Star Count 5639
Watcher Count 52
Fork Count 482
Issue Count 153

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date