Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

overflow={true} still can`t be shown

See original GitHub issue

lazy loading components inside a overflow container, set this to true.

 <LazyLoad height={50} offset={100} overflow once>
       <img src={item.headImg} alt="" className={style.avatar} />
 </LazyLoad>

but, not render

Issue Analytics

State:
Created 5 years ago
Reactions:7
Comments:14

Top GitHub Comments

14reactions

naoyeyecommented, Jul 24, 2018

maybe not universal, in my case, I replaced overflow-y: scroll; with overflow: auto;, then solved.

<div className="scroll-area">
  content.map((item, index) => {
    return (
      <LazyLoad key={`_container_img_${index}`}
        height={ 230 }
        placeholder={ placeholder }
        debounce={ -40 }
        overflow
        once>
        <div className={ style.imgwrap }>
          <img src={ item.url } />
        </div>
      </LazyLoad>
    )
  })
</div>

.scroll-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  overflow-y: scroll; // I replaced it with `overflow: auto;`, then solved.
  -webkit-overflow-scrolling: touch;
}

2reactions

jasonslyviacommented, Mar 27, 2018

try remove offset props and see what’s happening