vitalif-js
/
dynamic-virtual-scroll
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Disable `overflow-anchor` for virtualScrollDriver to work in Chrome correctly

master
Vitaliy Filippov 2018-10-10 02:28:21 +03:00
parent 38fdfbf78c
commit 135573f35b
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
DynamicVirtualScrollExample.js
View File

@ -54,9 +54,10 @@ export class DynamicVirtualScrollExample extends React.PureComponent
{ {
this.itemElements = []; this.itemElements = [];
return (<div style={{position: 'relative', width: '400px'}}> return (<div style={{position: 'relative', width: '400px'}}>
<div style={{overflowY: 'scroll', height: '400px', width: '400px'}} <div style={{overflowY: 'scroll', height: '400px', width: '400px', overflowAnchor: 'none', outline: 'none'}}
tabIndex="1"
ref={e => this.viewport = e} ref={e => this.viewport = e}
onScroll={this.componentDidUpdate}> onScroll={this.driver}>
<div style={{height: this.state.targetHeight+'px'}}> <div style={{height: this.state.targetHeight+'px'}}>
{this.useFixedHeader {this.useFixedHeader
? <div style={{height: '30px'}}></div> ? <div style={{height: '30px'}}></div>
@ -90,8 +91,7 @@ export class DynamicVirtualScrollExample extends React.PureComponent
</div>); </div>);
} }
// We should re-render only when we know we need some items that are not currently rendered driver = () =>
componentDidUpdate = () =>
{ {
const newState = virtualScrollDriver( const newState = virtualScrollDriver(
{ {
@ -107,6 +107,11 @@ export class DynamicVirtualScrollExample extends React.PureComponent
this.setStateIfDiffers(newState); this.setStateIfDiffers(newState);
} }
componentDidUpdate = () =>
{
this.driver();
}
componentDidMount() componentDidMount()
{ {
this.componentDidUpdate(); this.componentDidUpdate();

2
README.md
View File

@ -61,6 +61,8 @@ What to do with it:
* `newState.middleItemCount` - item count to be renderer after top placeholder. omit items if it is 0 * `newState.middleItemCount` - item count to be renderer after top placeholder. omit items if it is 0
* `newState.middlePlaceholderHeight` - height of the second (middle) placeholder. omit placeholder if it is 0 * `newState.middlePlaceholderHeight` - height of the second (middle) placeholder. omit placeholder if it is 0
* `newState.lastItemCount` - item count to be rendered in the end of the list * `newState.lastItemCount` - item count to be rendered in the end of the list
* also note that you MUST set `overflow-anchor: none` on your scroll container. You'll end up with
`virtualScrollDriver()` not able to finish updating in Chrome if you don't.
# Usage example with React # Usage example with React