Do not use offsetHeight, in other case you get unstable results in Chrome
parent
135573f35b
commit
3825d158b2
|
@ -95,6 +95,10 @@ export function virtualScrollDriver(props, oldState, getRenderedItemHeight)
|
||||||
firstVisibleItem = Math.floor(firstVisibleItem);
|
firstVisibleItem = Math.floor(firstVisibleItem);
|
||||||
let firstVisibleItemHeight = getRenderedItemHeight(firstVisibleItem) || newState.avgRowHeight;
|
let firstVisibleItemHeight = getRenderedItemHeight(firstVisibleItem) || newState.avgRowHeight;
|
||||||
newState.topPlaceholderHeight = scrollTop - firstVisibleItemHeight*firstVisibleItemOffset;
|
newState.topPlaceholderHeight = scrollTop - firstVisibleItemHeight*firstVisibleItemOffset;
|
||||||
|
if (newState.topPlaceholderHeight < 0)
|
||||||
|
{
|
||||||
|
newState.topPlaceholderHeight = 0;
|
||||||
|
}
|
||||||
if (firstVisibleItem + newState.viewportItemCount >= props.totalItems - newState.viewportItemCount)
|
if (firstVisibleItem + newState.viewportItemCount >= props.totalItems - newState.viewportItemCount)
|
||||||
{
|
{
|
||||||
// Only one placeholder is required
|
// Only one placeholder is required
|
||||||
|
@ -133,6 +137,10 @@ export function virtualScrollDriver(props, oldState, getRenderedItemHeight)
|
||||||
sum += itemSize;
|
sum += itemSize;
|
||||||
}
|
}
|
||||||
newState.middlePlaceholderHeight = newState.targetHeight - sum - newState.lastItemsTotalHeight - newState.topPlaceholderHeight;
|
newState.middlePlaceholderHeight = newState.targetHeight - sum - newState.lastItemsTotalHeight - newState.topPlaceholderHeight;
|
||||||
|
if (newState.middlePlaceholderHeight < 0)
|
||||||
|
{
|
||||||
|
newState.middlePlaceholderHeight = 0;
|
||||||
|
}
|
||||||
const correctedAvg = (sum + newState.lastItemsTotalHeight) / (newState.middleItemCount + newState.viewportItemCount);
|
const correctedAvg = (sum + newState.lastItemsTotalHeight) / (newState.middleItemCount + newState.viewportItemCount);
|
||||||
if (correctedAvg > newState.avgRowHeight)
|
if (correctedAvg > newState.avgRowHeight)
|
||||||
{
|
{
|
||||||
|
|
|
@ -33,7 +33,7 @@ export class DynamicVirtualScrollExample extends React.PureComponent
|
||||||
// DOM example. As smooth as the previous one (memory example), even without caching
|
// DOM example. As smooth as the previous one (memory example), even without caching
|
||||||
if (this.itemElements[index])
|
if (this.itemElements[index])
|
||||||
{
|
{
|
||||||
return this.itemElements[index].offsetHeight;
|
return this.itemElements[index].getBoundingClientRect().height;
|
||||||
}
|
}
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,6 +48,9 @@ Description of parameters:
|
||||||
* this function MUST return the height of currently rendered item or 0 if it's not currently rendered
|
* this function MUST return the height of currently rendered item or 0 if it's not currently rendered
|
||||||
* the returned height MUST be >= props.minRowHeight
|
* the returned height MUST be >= props.minRowHeight
|
||||||
* the function MAY cache heights of rendered items if you want your list to be more responsive
|
* the function MAY cache heights of rendered items if you want your list to be more responsive
|
||||||
|
* WARNING: you SHOULD NOT use `element.offsetHeight` for measuring. Either use `element.getBoundingClientRect().height`
|
||||||
|
or use some pre-computed heights, because `offsetHeight` may truncate the height to -1px when
|
||||||
|
browser scale is not 100%. Also it gives incorrect results with CSS transforms.
|
||||||
|
|
||||||
Returned object is `newState`. It contains the render parameters for you and also some internal state variables.
|
Returned object is `newState`. It contains the render parameters for you and also some internal state variables.
|
||||||
What to do with it:
|
What to do with it:
|
||||||
|
|
Loading…
Reference in New Issue