Can I pause`checkVisible` while the container is in `display: none` ?
Opened this issue · 0 comments
ArisAgeha commented
→ here is a demo in Codesandbox
open the console and observe,
you'll find that the testA
window (the red one) with display: block
is lazy-load normally √
but the testB
window (the yellow one) will load all children immediately ×
and then I check the source code, found that checkOverflowVisible
will always return true
while the scrollContainer is display: none
const checkOverflowVisible = function checkOverflowVisible(component, parent) {
const node = ReactDom.findDOMNode(component);
let parentTop;
let parentLeft;
let parentHeight;
let parentWidth;
/**
* these varible will always equal `0` while the `scrollContainer` is `display: none`
*/
try {
({ top: parentTop, left: parentLeft, height: parentHeight, width: parentWidth } = parent.getBoundingClientRect());
} catch (e) {
({ top: parentTop, left: parentLeft, height: parentHeight, width: parentWidth } = defaultBoundingClientRect);
}
...
return (offsetTop - offsets[0] <= intersectionHeight) &&
(offsetTop + height + offsets[1] >= 0) &&
(offsetLeft - offsets[0] <= intersectionWidth) &&
(offsetLeft + width + offsets[1] >= 0);
};
So, is that possible to insert code likes:
if (!parentHeight && !parentWidth) return;
into checkOverflowVisible
?
or are there already has some methods to pause check while scrollContainer is not visible?
thanks.