Compare commits
No commits in common. "master" and "very-old" have entirely different histories.
42
.eslintrc.js
42
.eslintrc.js
|
|
@ -1,42 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"parser": "babel-eslint",
|
|
||||||
"env": {
|
|
||||||
"es6": true,
|
|
||||||
"browser": true
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"eslint:recommended",
|
|
||||||
"plugin:react/recommended"
|
|
||||||
],
|
|
||||||
"parserOptions": {
|
|
||||||
"ecmaVersion": 6,
|
|
||||||
"sourceType": "module",
|
|
||||||
"ecmaFeatures": {
|
|
||||||
"experimentalObjectRestSpread": true,
|
|
||||||
"jsx": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
"react"
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"indent": [
|
|
||||||
"error",
|
|
||||||
4
|
|
||||||
],
|
|
||||||
"linebreak-style": [
|
|
||||||
"error",
|
|
||||||
"unix"
|
|
||||||
],
|
|
||||||
"semi": [
|
|
||||||
"error",
|
|
||||||
"always"
|
|
||||||
],
|
|
||||||
"no-control-regex": [
|
|
||||||
"off"
|
|
||||||
],
|
|
||||||
"no-empty": [
|
|
||||||
"off"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,151 +0,0 @@
|
||||||
/**
|
|
||||||
* Virtual scroll driver for dynamic row heights
|
|
||||||
*
|
|
||||||
* License: GNU LGPLv3.0+
|
|
||||||
* (c) Vitaliy Filippov 2018+
|
|
||||||
*
|
|
||||||
* @param props { totalItems, minRowHeight, viewportHeight, scrollTop }
|
|
||||||
* @param oldState - previous state object
|
|
||||||
* @param getRenderedItemHeight = (itemIndex) => height
|
|
||||||
* 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 function MAY cache heights of rendered items if you want your list to be more responsive
|
|
||||||
* @returns new state object
|
|
||||||
* you MUST re-render your list when any state values change
|
|
||||||
* you MUST preserve all keys in the state object and pass it back via `oldState` on the next run
|
|
||||||
* you MUST use the following keys for rendering:
|
|
||||||
* newState.targetHeight - height of the 1px wide invisible div you should render in the scroll container
|
|
||||||
* newState.topPlaceholderHeight - height of the first (top) placeholder. omit placeholder if it is 0
|
|
||||||
* newState.firstMiddleItem - first item to be rendered after top placeholder
|
|
||||||
* 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.lastItemCount - item count to be rendered in the end of the list
|
|
||||||
*/
|
|
||||||
export function virtualScrollDriver(props, oldState, getRenderedItemHeight)
|
|
||||||
{
|
|
||||||
const viewportHeight = props.viewportHeight;
|
|
||||||
const viewportItemCount = Math.ceil(viewportHeight/props.minRowHeight); // +border?
|
|
||||||
const newState = {
|
|
||||||
viewportHeight,
|
|
||||||
viewportItemCount,
|
|
||||||
totalItems: props.totalItems,
|
|
||||||
scrollHeightInItems: oldState.scrollHeightInItems,
|
|
||||||
avgRowHeight: oldState.avgRowHeight,
|
|
||||||
targetHeight: 0,
|
|
||||||
topPlaceholderHeight: 0,
|
|
||||||
firstMiddleItem: 0,
|
|
||||||
middleItemCount: 0,
|
|
||||||
middlePlaceholderHeight: 0,
|
|
||||||
lastItemCount: props.totalItems,
|
|
||||||
lastItemsTotalHeight: oldState.lastItemsTotalHeight,
|
|
||||||
};
|
|
||||||
if (!oldState.viewportHeight)
|
|
||||||
{
|
|
||||||
oldState = { ...oldState };
|
|
||||||
for (let k in newState)
|
|
||||||
{
|
|
||||||
oldState[k] = oldState[k] || 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (2*newState.viewportItemCount >= props.totalItems)
|
|
||||||
{
|
|
||||||
// We need at least 2*viewportItemCount to perform virtual scrolling
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
newState.lastItemCount = newState.viewportItemCount;
|
|
||||||
{
|
|
||||||
let lastItemsHeight = 0, lastVisibleItems = 0;
|
|
||||||
let lastItemSize;
|
|
||||||
while (lastItemsHeight < viewportHeight)
|
|
||||||
{
|
|
||||||
lastItemSize = getRenderedItemHeight(props.totalItems - 1 - lastVisibleItems);
|
|
||||||
if (!lastItemSize)
|
|
||||||
{
|
|
||||||
// Some required items in the end are missing
|
|
||||||
lastItemSize = 0;
|
|
||||||
}
|
|
||||||
lastItemsHeight += lastItemSize < props.minRowHeight ? props.minRowHeight : lastItemSize;
|
|
||||||
lastVisibleItems++;
|
|
||||||
}
|
|
||||||
newState.scrollHeightInItems = props.totalItems - lastVisibleItems + (lastItemsHeight-viewportHeight) / lastItemSize;
|
|
||||||
// Calculate heights of the rest of items
|
|
||||||
while (lastVisibleItems < newState.viewportItemCount)
|
|
||||||
{
|
|
||||||
lastItemsHeight += getRenderedItemHeight(props.totalItems - 1 - lastVisibleItems);
|
|
||||||
lastVisibleItems++;
|
|
||||||
}
|
|
||||||
newState.lastItemsTotalHeight = lastItemsHeight;
|
|
||||||
newState.avgRowHeight = lastItemsHeight / lastVisibleItems;
|
|
||||||
newState.avgRowHeight = !oldState.avgRowHeight || newState.avgRowHeight > oldState.avgRowHeight
|
|
||||||
? newState.avgRowHeight
|
|
||||||
: oldState.avgRowHeight;
|
|
||||||
}
|
|
||||||
newState.targetHeight = newState.avgRowHeight * newState.scrollHeightInItems + newState.viewportHeight;
|
|
||||||
const scrollTop = props.scrollTop;
|
|
||||||
let scrollPos = scrollTop / (newState.targetHeight - newState.viewportHeight);
|
|
||||||
if (scrollPos > 1)
|
|
||||||
{
|
|
||||||
// Rare case - avgRowHeight isn't enough and we need more
|
|
||||||
// avgRowHeight will be corrected after rendering all items
|
|
||||||
scrollPos = 1;
|
|
||||||
}
|
|
||||||
let firstVisibleItem = scrollPos * newState.scrollHeightInItems;
|
|
||||||
const firstVisibleItemOffset = firstVisibleItem - Math.floor(firstVisibleItem);
|
|
||||||
// FIXME: Render some items before current for smoothness
|
|
||||||
firstVisibleItem = Math.floor(firstVisibleItem);
|
|
||||||
let firstVisibleItemHeight = getRenderedItemHeight(firstVisibleItem) || newState.avgRowHeight;
|
|
||||||
newState.topPlaceholderHeight = scrollTop - firstVisibleItemHeight*firstVisibleItemOffset;
|
|
||||||
if (newState.topPlaceholderHeight < 0)
|
|
||||||
{
|
|
||||||
newState.topPlaceholderHeight = 0;
|
|
||||||
}
|
|
||||||
if (firstVisibleItem + newState.viewportItemCount >= props.totalItems - newState.viewportItemCount)
|
|
||||||
{
|
|
||||||
// Only one placeholder is required
|
|
||||||
newState.lastItemCount = props.totalItems - firstVisibleItem;
|
|
||||||
let sum = 0, count = props.totalItems - newState.viewportItemCount - firstVisibleItem;
|
|
||||||
count = count > 0 ? count : 0;
|
|
||||||
for (let i = 0; i < count; i++)
|
|
||||||
{
|
|
||||||
const itemSize = getRenderedItemHeight(i+newState.firstMiddleItem);
|
|
||||||
if (!itemSize)
|
|
||||||
{
|
|
||||||
// Some required items in the middle are missing
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
sum += itemSize;
|
|
||||||
}
|
|
||||||
const correctedAvg = (sum + newState.lastItemsTotalHeight) / (count + newState.viewportItemCount);
|
|
||||||
if (correctedAvg > newState.avgRowHeight)
|
|
||||||
{
|
|
||||||
newState.avgRowHeight = correctedAvg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
newState.firstMiddleItem = firstVisibleItem;
|
|
||||||
newState.middleItemCount = newState.viewportItemCount;
|
|
||||||
let sum = 0;
|
|
||||||
for (let i = 0; i < newState.middleItemCount; i++)
|
|
||||||
{
|
|
||||||
const itemSize = getRenderedItemHeight(i+newState.firstMiddleItem);
|
|
||||||
if (!itemSize)
|
|
||||||
{
|
|
||||||
// Some required items in the middle are missing
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
sum += itemSize;
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
if (correctedAvg > newState.avgRowHeight)
|
|
||||||
{
|
|
||||||
newState.avgRowHeight = correctedAvg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
|
|
@ -1,132 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import { virtualScrollDriver } from './DynamicVirtualScroll.js';
|
|
||||||
|
|
||||||
export class DynamicVirtualScrollExample extends React.PureComponent
|
|
||||||
{
|
|
||||||
useFixedHeader = true
|
|
||||||
|
|
||||||
constructor()
|
|
||||||
{
|
|
||||||
super();
|
|
||||||
const items = [];
|
|
||||||
for (let i = 0; i < 1000; i++)
|
|
||||||
{
|
|
||||||
items[i] = 30 + Math.round(Math.random()*50);
|
|
||||||
}
|
|
||||||
this.state = { items };
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenderedItemHeight_MemoryExample = (index) =>
|
|
||||||
{
|
|
||||||
// Just for example: imitating renderer not knowing about off-screen items
|
|
||||||
if (index >= this.state.firstMiddleItem && index < this.state.firstMiddleItem+this.state.middleItemCount ||
|
|
||||||
index >= this.state.items.length - this.state.lastItemCount)
|
|
||||||
{
|
|
||||||
return this.state.items[index];
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenderedItemHeight_DOMExample = (index) =>
|
|
||||||
{
|
|
||||||
// DOM example. As smooth as the previous one (memory example), even without caching
|
|
||||||
if (this.itemElements[index])
|
|
||||||
{
|
|
||||||
return this.itemElements[index].getBoundingClientRect().height;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenderedItemHeight = this.getRenderedItemHeight_DOMExample
|
|
||||||
|
|
||||||
renderItems(start, count)
|
|
||||||
{
|
|
||||||
return this.state.items.slice(start, start+count).map((item, index) => (<div
|
|
||||||
key={'i'+(index+start)}
|
|
||||||
ref={e => this.itemElements[index+start] = e}
|
|
||||||
style={{height: item+'px', color: 'white', textAlign: 'center', lineHeight: item+'px', background: 'rgb('+Math.round(item*255/80)+',0,0)'}}>
|
|
||||||
№ {index+start}: {item}px
|
|
||||||
</div>));
|
|
||||||
}
|
|
||||||
|
|
||||||
render()
|
|
||||||
{
|
|
||||||
this.itemElements = [];
|
|
||||||
return (<div style={{position: 'relative', width: '400px'}}>
|
|
||||||
<div style={{overflowY: 'scroll', height: '400px', width: '400px', overflowAnchor: 'none', outline: 'none'}}
|
|
||||||
tabIndex="1"
|
|
||||||
ref={e => this.viewport = e}
|
|
||||||
onScroll={this.driver}>
|
|
||||||
<div style={{height: this.state.targetHeight+'px'}}>
|
|
||||||
{this.useFixedHeader
|
|
||||||
? <div style={{height: '30px'}}></div>
|
|
||||||
: null}
|
|
||||||
{this.state.topPlaceholderHeight
|
|
||||||
? <div style={{height: this.state.topPlaceholderHeight+'px'}}></div>
|
|
||||||
: null}
|
|
||||||
{this.state.middleItemCount
|
|
||||||
? this.renderItems(this.state.firstMiddleItem, this.state.middleItemCount)
|
|
||||||
: null}
|
|
||||||
{this.state.middlePlaceholderHeight
|
|
||||||
? <div style={{height: this.state.middlePlaceholderHeight+'px'}}></div>
|
|
||||||
: null}
|
|
||||||
{this.state.lastItemCount
|
|
||||||
? this.renderItems(this.state.items.length-this.state.lastItemCount, this.state.lastItemCount)
|
|
||||||
: null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{this.useFixedHeader ? <div style={{
|
|
||||||
position: 'absolute',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: this.state.scrollbarWidth+'px',
|
|
||||||
height: '30px',
|
|
||||||
background: '#0080c0',
|
|
||||||
color: 'white',
|
|
||||||
textAlign: 'center',
|
|
||||||
lineHeight: '30px'}}>
|
|
||||||
fixed header
|
|
||||||
</div> : null}
|
|
||||||
</div>);
|
|
||||||
}
|
|
||||||
|
|
||||||
driver = () =>
|
|
||||||
{
|
|
||||||
const newState = virtualScrollDriver(
|
|
||||||
{
|
|
||||||
totalItems: this.state.items.length,
|
|
||||||
minRowHeight: 30,
|
|
||||||
viewportHeight: this.viewport.clientHeight - (this.useFixedHeader ? 30 : 0),
|
|
||||||
scrollTop: this.viewport.scrollTop,
|
|
||||||
},
|
|
||||||
this.state,
|
|
||||||
this.getRenderedItemHeight
|
|
||||||
);
|
|
||||||
newState.scrollbarWidth = this.viewport ? this.viewport.offsetWidth-this.viewport.clientWidth : 12;
|
|
||||||
this.setStateIfDiffers(newState);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate = () =>
|
|
||||||
{
|
|
||||||
this.driver();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount()
|
|
||||||
{
|
|
||||||
this.componentDidUpdate();
|
|
||||||
}
|
|
||||||
|
|
||||||
setStateIfDiffers(state, cb)
|
|
||||||
{
|
|
||||||
for (const k in state)
|
|
||||||
{
|
|
||||||
if (this.state[k] != state[k])
|
|
||||||
{
|
|
||||||
this.setState(state, cb);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
161
README.md
161
README.md
|
|
@ -1,161 +0,0 @@
|
||||||
# Dynamic Virtual Scroll Driver
|
|
||||||
|
|
||||||
Virtual scrolling is a technique for displaying long lists or tables when you render only a small number
|
|
||||||
of visible items and skip items that are offscreen. You may also have heard about it like
|
|
||||||
"buffered render" or "windowed render" - it's the same.
|
|
||||||
|
|
||||||
There are plenty of virtual scroll implementations for JS.
|
|
||||||
Some of them are part of a larger UI library (ag-grid, ExtJS and so on), some of them are more
|
|
||||||
standalone (react-virtualized, react-window, ngx-virtual-scroller, ngx-ui-scroll, react-dynamic-virtual-list).
|
|
||||||
|
|
||||||
However, there is a thing that they all miss: dynamic (and unknown apriori) row heights.
|
|
||||||
Some implementations allow to set different row heights for items, but you must calculate
|
|
||||||
all heights before rendering; some allow dynamic row heights, but have bugs and act weird or don't really work;
|
|
||||||
others just force you to use fixed row height. Most implementations are also tied to some specific
|
|
||||||
UI component or framework and are unusable with other ones.
|
|
||||||
|
|
||||||
Good news, everyone: we have a solution!
|
|
||||||
|
|
||||||
It is render-agnostic and implemented in this library. Basically, this library only does the maths for you
|
|
||||||
while letting you render your component yourself. You can use it with React, Angular, pure JS or any other
|
|
||||||
framework you want to. You can implement lists and grids (tables) with it. It works smoothly, does not break
|
|
||||||
built-in browser scrolling and even works on mobile devices.
|
|
||||||
|
|
||||||
# Usage
|
|
||||||
|
|
||||||
The library exports a single function:
|
|
||||||
|
|
||||||
```
|
|
||||||
import { virtualScrollDriver } from 'dynamic-virtual-scroll';
|
|
||||||
|
|
||||||
const newState = virtualScrollDriver(
|
|
||||||
{ totalItems, minRowHeight, viewportHeight, scrollTop },
|
|
||||||
oldState,
|
|
||||||
function getRenderedItemHeight(itemIndex) { ... }
|
|
||||||
);
|
|
||||||
```
|
|
||||||
|
|
||||||
You must call it after each render and also when the viewport, scroll position or items change.
|
|
||||||
|
|
||||||
Description of parameters:
|
|
||||||
|
|
||||||
* `totalItems` - total number of items in your list
|
|
||||||
* `minRowHeight` - minimum item height
|
|
||||||
* `viewportHeight` - current viewport height (take from DOM)
|
|
||||||
* `scrollTop` - current scroll position (take from DOM)
|
|
||||||
* `oldState` - previous state object as returned from previous `virtualScrollDriver()` call
|
|
||||||
* `getRenderedItemHeight = (itemIndex) => height`:
|
|
||||||
* 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 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.
|
|
||||||
What to do with it:
|
|
||||||
|
|
||||||
* you MUST re-render your list when any state values change
|
|
||||||
* you MUST preserve all keys in the state object and pass it back via `oldState` on the next run
|
|
||||||
* you MUST base your rendering on the following keys:
|
|
||||||
* `newState.targetHeight` - height of the 1px wide invisible div you should render in the scroll container
|
|
||||||
* `newState.topPlaceholderHeight` - height of the first (top) placeholder. omit placeholder if it is 0
|
|
||||||
* `newState.firstMiddleItem` - first item to be rendered after top placeholder
|
|
||||||
* `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.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 with React
|
|
||||||
|
|
||||||
There is a reference virtual list implementation for React.
|
|
||||||
|
|
||||||
It is usually sufficient for almost everything, including grids. Sad thing about grids (virtualized tables)
|
|
||||||
in HTML is that automatic table-like layout is slow in browsers, so in fact the best way to implement
|
|
||||||
them is via simple virtualized lists of \<div>'s with absolutely positioned cells inside.
|
|
||||||
|
|
||||||
```
|
|
||||||
import React from 'react';
|
|
||||||
import { VirtualScrollList } from 'dynamic-virtual-scroll/VirtualScrollList.es5.js';
|
|
||||||
|
|
||||||
class MyList extends React.Component
|
|
||||||
{
|
|
||||||
renderItem = (i) =>
|
|
||||||
{
|
|
||||||
if (!this.items[i])
|
|
||||||
return null;
|
|
||||||
return <div style={{minHeight: '20px'}}>{this.items[i].title}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
render()
|
|
||||||
{
|
|
||||||
return <VirtualScrollList
|
|
||||||
totalItems={this.items.length}
|
|
||||||
renderItem={this.renderItem}
|
|
||||||
minRowHeight={20}
|
|
||||||
/>;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
Description of VirtualScrollList parameters:
|
|
||||||
|
|
||||||
- totalItems: required, total number of items in the list.
|
|
||||||
- minRowHeight: required, minimal possible item height in the list.
|
|
||||||
- renderItem: required, function that renders item by index as React element(s).
|
|
||||||
- viewportHeight: optional, viewport height to use for virtual scrolling.
|
|
||||||
May be used in case when it can't be determined automatically by VirtualScroll,
|
|
||||||
for example inside an animated element with css maxHeight.
|
|
||||||
- header: optional, React element(s) to unconditionally render in the beginning of
|
|
||||||
the list. The intended usage is to render fixed header row with CSS position: sticky
|
|
||||||
over the scrolled content.
|
|
||||||
- headerHeight: optional. In case there is a fixed header, this must be its height
|
|
||||||
in pixels.
|
|
||||||
- All other parameters (className, style, onClick, etc) are passed as-is to the
|
|
||||||
underlying root \<div> of the list.
|
|
||||||
|
|
||||||
VirtualScrollList contains some extra shenanigans to make sure the scroll position
|
|
||||||
preserves when the total number of items changes. Also it has two extra methods:
|
|
||||||
|
|
||||||
- `list.scrollToItem(itemIndex)` - positions the list at `itemIndex`. The index may
|
|
||||||
contain fractional part, in that case the list will be positioned at the corresponding
|
|
||||||
% of height of the item.
|
|
||||||
- `list.getItemScrollPos()` - returns current scroll position in items. The returned
|
|
||||||
index may contain fractional part and may be used as input to `list.scrollToItem()`.
|
|
||||||
|
|
||||||
# Simpler React example
|
|
||||||
|
|
||||||
See `DynamicVirtualScrollExample.js`.
|
|
||||||
|
|
||||||
How to test it:
|
|
||||||
|
|
||||||
* Clone this repository
|
|
||||||
* `npm install`
|
|
||||||
* `npm run build`
|
|
||||||
* Open `index.html` in your browser
|
|
||||||
|
|
||||||
# Demo
|
|
||||||
|
|
||||||
http://yourcmc.ru/dynamic-virtual-scroll/
|
|
||||||
|
|
||||||
# Algorithm
|
|
||||||
|
|
||||||
* Use reasonable fixed minimum row height
|
|
||||||
* Always render `screen/minHeight` last rows
|
|
||||||
* Find maximum possible viewport start in units of (item number + % of item)
|
|
||||||
* Measure average height of last rows
|
|
||||||
* `avgHeight = max(minHeight, lastRowAvgHeight)`
|
|
||||||
* `targetHeight = avgHeight*rowCount`
|
|
||||||
* Total scroll view height will be `targetHeight`
|
|
||||||
* `scrollPos = targetHeight > offsetHeight ? min(1, scrollTop / (targetHeight - offsetHeight)) : 0`
|
|
||||||
* First visible item will be `Math.floor(scrollPos*maxPossibleViewportStart)`
|
|
||||||
* Additional scroll offset will be `itemOffset = (scrollPos*maxPossibleViewportStart - Math.floor(scrollPos*maxPossibleViewportStart))*firstVisibleItemHeight`
|
|
||||||
* First (top) placeholder height will be `scrollTop-itemOffset`
|
|
||||||
* Second (middle) placeholder height will be `avgHeight*nodeCount - sum(heights of all rendered rows) - (first placeholder height)`
|
|
||||||
|
|
||||||
# License and author
|
|
||||||
|
|
||||||
Author: Vitaliy Filippov, 2018+
|
|
||||||
|
|
||||||
License: GNU LGPLv3.0 or newer
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
/**
|
|
||||||
* A simple React list with virtual scrolling based on dynamic-virtual-scroll driver
|
|
||||||
* USUALLY sufficient for everything including grids (using absolute sizing of cells).
|
|
||||||
* Just because browsers can't do virtualized grid or table layouts efficiently.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import { virtualScrollDriver } from 'dynamic-virtual-scroll';
|
|
||||||
|
|
||||||
export class VirtualScrollList extends React.Component
|
|
||||||
{
|
|
||||||
static propTypes = {
|
|
||||||
className: PropTypes.string,
|
|
||||||
style: PropTypes.object,
|
|
||||||
totalItems: PropTypes.number.isRequired,
|
|
||||||
minRowHeight: PropTypes.number.isRequired,
|
|
||||||
viewportHeight: PropTypes.number,
|
|
||||||
header: PropTypes.any,
|
|
||||||
headerHeight: PropTypes.number,
|
|
||||||
renderItem: PropTypes.func.isRequired,
|
|
||||||
}
|
|
||||||
|
|
||||||
state = {
|
|
||||||
targetHeight: 0,
|
|
||||||
topPlaceholderHeight: 0,
|
|
||||||
firstMiddleItem: 0,
|
|
||||||
middleItemCount: 0,
|
|
||||||
middlePlaceholderHeight: 0,
|
|
||||||
lastItemCount: 0,
|
|
||||||
scrollTo: 0,
|
|
||||||
scrollTimes: 0,
|
|
||||||
}
|
|
||||||
|
|
||||||
setItemRef = []
|
|
||||||
itemRefs = []
|
|
||||||
itemRefCount = []
|
|
||||||
|
|
||||||
makeRef(i)
|
|
||||||
{
|
|
||||||
this.setItemRef[i] = (e) =>
|
|
||||||
{
|
|
||||||
// If the new row instance is mounted before unmouting the old one,
|
|
||||||
// we get called 2 times in wrong order: first with the new instance,
|
|
||||||
// then with null telling us that the old one is unmounted.
|
|
||||||
// We track reference count to workaround it.
|
|
||||||
this.itemRefCount[i] = (this.itemRefCount[i]||0) + (e ? 1 : -1);
|
|
||||||
if (e || !this.itemRefCount[i])
|
|
||||||
{
|
|
||||||
this.itemRefs[i] = e;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
renderItems(start, count, is_end)
|
|
||||||
{
|
|
||||||
let r = [];
|
|
||||||
for (let i = 0; i < count; i++)
|
|
||||||
{
|
|
||||||
let item = this.props.renderItem(i+start);
|
|
||||||
if (item)
|
|
||||||
{
|
|
||||||
if (!this.setItemRef[i+start])
|
|
||||||
{
|
|
||||||
this.makeRef(i+start);
|
|
||||||
}
|
|
||||||
r.push(<item.type {...item.props} key={i+start} ref={this.setItemRef[i+start]} />);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return r;
|
|
||||||
}
|
|
||||||
|
|
||||||
render()
|
|
||||||
{
|
|
||||||
if (this.state.totalItems && this.props.totalItems != this.state.totalItems &&
|
|
||||||
this.state.scrollTimes <= 0 && this.viewport && this.viewport.offsetParent)
|
|
||||||
{
|
|
||||||
// Automatically preserve scroll position when item count changes...
|
|
||||||
// But only when the list is on-screen! We'll end up with an infinite update loop if it's off-screen.
|
|
||||||
this.state.scrollTo = this.getItemScrollPos();
|
|
||||||
this.state.scrollTimes = 2;
|
|
||||||
}
|
|
||||||
const props = { ...this.props };
|
|
||||||
for (const k in VirtualScrollList.propTypes)
|
|
||||||
{
|
|
||||||
delete props[k];
|
|
||||||
}
|
|
||||||
return (<div
|
|
||||||
{...props}
|
|
||||||
className={this.props.className}
|
|
||||||
style={{
|
|
||||||
position: 'relative',
|
|
||||||
...(this.props.style||{}),
|
|
||||||
overflowAnchor: 'none',
|
|
||||||
}}
|
|
||||||
ref={this.setViewport}
|
|
||||||
onScroll={this.onScroll}>
|
|
||||||
{this.props.header}
|
|
||||||
{this.state.targetHeight > 0
|
|
||||||
? <div key="target" style={{position: 'absolute', top: 0, left: '-5px', width: '1px', height: this.state.targetHeight+'px'}}></div>
|
|
||||||
: null}
|
|
||||||
{this.state.topPlaceholderHeight
|
|
||||||
? <div style={{height: this.state.topPlaceholderHeight+'px'}} key="top"></div>
|
|
||||||
: null}
|
|
||||||
{this.renderItems(this.state.firstMiddleItem, this.state.middleItemCount)}
|
|
||||||
{this.state.middlePlaceholderHeight
|
|
||||||
? <div style={{height: this.state.middlePlaceholderHeight+'px'}} key="mid"></div>
|
|
||||||
: null}
|
|
||||||
{this.renderItems(this.props.totalItems-this.state.lastItemCount, this.state.lastItemCount, true)}
|
|
||||||
</div>);
|
|
||||||
}
|
|
||||||
|
|
||||||
setViewport = (e) =>
|
|
||||||
{
|
|
||||||
this.viewport = e;
|
|
||||||
}
|
|
||||||
|
|
||||||
getRenderedItemHeight = (index) =>
|
|
||||||
{
|
|
||||||
if (this.itemRefs[index])
|
|
||||||
{
|
|
||||||
const e = ReactDOM.findDOMNode(this.itemRefs[index]);
|
|
||||||
if (e)
|
|
||||||
{
|
|
||||||
// MSIE sometimes manages to report non-integer element heights for elements of an integer height...
|
|
||||||
// Non-integer element sizes are allowed in getBoundingClientRect, one notable example of them
|
|
||||||
// are collapsed table borders. But we still ignore less than 1/100 of a pixel difference.
|
|
||||||
return Math.round(e.getBoundingClientRect().height*100)/100;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
onScroll = () =>
|
|
||||||
{
|
|
||||||
this.driver();
|
|
||||||
if (this.props.onScroll)
|
|
||||||
{
|
|
||||||
this.props.onScroll(this.viewport);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate = () =>
|
|
||||||
{
|
|
||||||
let changed = this.driver();
|
|
||||||
if (!changed && this.state.scrollTimes > 0 && this.props.totalItems > 0 &&
|
|
||||||
this.viewport && this.viewport.offsetParent)
|
|
||||||
{
|
|
||||||
// FIXME: It would be better to find a way to put this logic back into virtual-scroll-driver
|
|
||||||
let pos = this.state.scrollTo;
|
|
||||||
if (pos > this.state.scrollHeightInItems)
|
|
||||||
{
|
|
||||||
pos = this.state.scrollHeightInItems;
|
|
||||||
}
|
|
||||||
if (this.state.targetHeight)
|
|
||||||
{
|
|
||||||
this.viewport.scrollTop = Math.round((this.state.targetHeight - this.state.viewportHeight)*pos/this.state.scrollHeightInItems);
|
|
||||||
this.setState({ scrollTimes: this.state.scrollTimes - 1 });
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
const el = ReactDOM.findDOMNode(this.itemRefs[Math.floor(pos)]);
|
|
||||||
if (el)
|
|
||||||
{
|
|
||||||
this.viewport.scrollTop = el.offsetTop - (this.props.headerHeight||0) + el.offsetHeight*(pos-Math.floor(pos));
|
|
||||||
}
|
|
||||||
this.setState({ scrollTimes: 0 });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount()
|
|
||||||
{
|
|
||||||
this.driver();
|
|
||||||
}
|
|
||||||
|
|
||||||
scrollToItem = (pos) =>
|
|
||||||
{
|
|
||||||
// Scroll position must be recalculated twice, because first render
|
|
||||||
// may change the average row height. In fact, it must be repeated
|
|
||||||
// until average row height stops changing, but twice is usually sufficient
|
|
||||||
this.setState({ scrollTo: pos, scrollTimes: 2 });
|
|
||||||
}
|
|
||||||
|
|
||||||
getItemScrollPos = () =>
|
|
||||||
{
|
|
||||||
if (this.state.targetHeight)
|
|
||||||
{
|
|
||||||
// Virtual scroll is active
|
|
||||||
let pos = this.viewport.scrollTop / (this.state.targetHeight - this.state.viewportHeight);
|
|
||||||
return pos * this.state.scrollHeightInItems;
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
// Virtual scroll is inactive
|
|
||||||
let avgr = this.viewport.scrollHeight / this.state.totalItems;
|
|
||||||
return this.viewport.scrollTop / avgr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
driver = () =>
|
|
||||||
{
|
|
||||||
if (!this.viewport || !this.viewport.offsetParent)
|
|
||||||
{
|
|
||||||
// Fool tolerance - do nothing if we are hidden
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
const newState = virtualScrollDriver(
|
|
||||||
{
|
|
||||||
totalItems: this.props.totalItems,
|
|
||||||
minRowHeight: this.props.minRowHeight,
|
|
||||||
viewportHeight: this.props.viewportHeight || (this.viewport.clientHeight-(this.props.headerHeight||0)),
|
|
||||||
scrollTop: this.viewport.scrollTop,
|
|
||||||
},
|
|
||||||
this.state,
|
|
||||||
this.getRenderedItemHeight
|
|
||||||
);
|
|
||||||
if (newState.viewportHeight || this.state.viewportHeight)
|
|
||||||
{
|
|
||||||
return this.setStateIfDiffers(newState);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
setStateIfDiffers(state, cb)
|
|
||||||
{
|
|
||||||
for (const k in state)
|
|
||||||
{
|
|
||||||
if (this.state[k] != state[k])
|
|
||||||
{
|
|
||||||
this.setState(state, cb);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12
index.html
12
index.html
|
|
@ -1,12 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<title>Dynamic Virtual Scroll Driver Demo</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript" src="dist/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
8
main.js
8
main.js
|
|
@ -1,8 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
|
|
||||||
import { DynamicVirtualScrollExample } from './DynamicVirtualScrollExample.js';
|
|
||||||
|
|
||||||
ReactDOM.render(
|
|
||||||
<DynamicVirtualScrollExample />, document.getElementById('app')
|
|
||||||
);
|
|
||||||
69
package.json
69
package.json
|
|
@ -1,69 +0,0 @@
|
||||||
{
|
|
||||||
"name": "dynamic-virtual-scroll",
|
|
||||||
"version": "1.0.15",
|
|
||||||
"author": {
|
|
||||||
"name": "Vitaliy Filippov",
|
|
||||||
"email": "vitalif@yourcmc.ru",
|
|
||||||
"url": "http://yourcmc.ru/wiki/"
|
|
||||||
},
|
|
||||||
"description": "Render-agnostic Dynamic Virtual Scroll Driver",
|
|
||||||
"keywords": [
|
|
||||||
"virtual",
|
|
||||||
"scrolling",
|
|
||||||
"list",
|
|
||||||
"grid",
|
|
||||||
"windowed",
|
|
||||||
"dynamic",
|
|
||||||
"virtual-list",
|
|
||||||
"virtual-scroll",
|
|
||||||
"lazy-rendering",
|
|
||||||
"react"
|
|
||||||
],
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/vitalif/dynamic-virtual-scroll"
|
|
||||||
},
|
|
||||||
"homepage": "https://github.com/vitalif/dynamic-virtual-scroll",
|
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/vitalif/dynamic-virtual-scroll/issues"
|
|
||||||
},
|
|
||||||
"license": "LGPL",
|
|
||||||
"maintainers": [
|
|
||||||
{
|
|
||||||
"name": "vitalif",
|
|
||||||
"email": "vitalif@yourcmc.ru"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"files": [
|
|
||||||
"DynamicVirtualScroll.es5.js",
|
|
||||||
"DynamicVirtualScroll.js",
|
|
||||||
"VirtualScrollList.es5.js",
|
|
||||||
"VirtualScrollList.js",
|
|
||||||
"DynamicVirtualScrollExample.js",
|
|
||||||
"README.md"
|
|
||||||
],
|
|
||||||
"main": "./DynamicVirtualScroll.es5.js",
|
|
||||||
"module": "./DynamicVirtualScroll.js",
|
|
||||||
"dependencies": {},
|
|
||||||
"devDependencies": {
|
|
||||||
"babel-cli": "^6.26.0",
|
|
||||||
"babel-core": "^6.26.3",
|
|
||||||
"babel-eslint": "^10.0.1",
|
|
||||||
"babel-loader": "^7.1.5",
|
|
||||||
"babel-polyfill": "^6.26.0",
|
|
||||||
"babel-preset-env": "^1.7.0",
|
|
||||||
"babel-preset-react": "^6.24.1",
|
|
||||||
"babel-preset-stage-1": "^6.24.1",
|
|
||||||
"eslint": "^5.1.0",
|
|
||||||
"eslint-plugin-react": "^7.10.0",
|
|
||||||
"react": "^16.4.1",
|
|
||||||
"react-dom": "^16.4.1",
|
|
||||||
"webpack": "^4.20.2",
|
|
||||||
"webpack-cli": "^3.1.2"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"build": "eslint DynamicVirtualScroll.js && webpack --mode=production --optimize-minimize && (babel DynamicVirtualScroll.js > DynamicVirtualScroll.es5.js) && (babel VirtualScrollList.js > VirtualScrollList.es5.js)",
|
|
||||||
"watch-dev": "NODE_ENV=development webpack --mode=development -w",
|
|
||||||
"watch": "webpack --mode=production -w --optimize-minimize"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,230 @@
|
||||||
|
<div tabindex="1" id="scroll" style="overflow-y: scroll; width: 300px; position: relative; height: 300px; border: 1px solid gray;" onscroll="enqueue(scrollother)">
|
||||||
|
<div style="height: 1500px" id="content"></div>
|
||||||
|
<div id="realcontent" style="z-index: 1; width: 100%; position: absolute; overflow: hidden"></div>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
.item { border: 1px solid gray; box-sizing: border-box; text-align: center; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
/*<!--*/
|
||||||
|
//http://stackoverflow.com/questions/11730596/non-linear-scrolling
|
||||||
|
var s = document.getElementById('scroll');
|
||||||
|
var c = document.getElementById('content');
|
||||||
|
var rc = document.getElementById('realcontent');
|
||||||
|
|
||||||
|
var minheight = 100;
|
||||||
|
|
||||||
|
var api = (function() {
|
||||||
|
var items = [];
|
||||||
|
for (var i = 0; i < 100; i++)
|
||||||
|
items.push(30+Math.round(Math.random()*120));
|
||||||
|
items = [31,109,107,97,140,133,49,69,123,43,137,128,31,101,120,148,119,30,31,37,43,119,105,106,91,148,36,85,76,97,148,31,53,126,138,51,85,65,53,78,39,49,133,49,103,146,143,148,115,49,55,98,44,84,57,127,98,98,104,116,150,82,123,62,134,109,89,71,36,50,146,146,53,35,86,143,86,138,39,81,72,106,88,117,127,97,127,147,102,42,124,99,32,51,84,45,106,139,140,69];
|
||||||
|
// Аналог API получения элементов
|
||||||
|
return [ items.length, function(start, count, callback)
|
||||||
|
{
|
||||||
|
setTimeout(function() { callback(items.slice(start, start+count)); }, 200);
|
||||||
|
} ]
|
||||||
|
})();
|
||||||
|
var totalItems = api[0];
|
||||||
|
var getItems = api[1];
|
||||||
|
|
||||||
|
c.style.height = (totalItems*minheight)+'px';
|
||||||
|
|
||||||
|
var lastFirst = 0;
|
||||||
|
var curFirst = 0, curOffset = 0, curCount = 0, curPos = null;
|
||||||
|
var pagesize = Math.floor(s.offsetHeight/30);
|
||||||
|
|
||||||
|
rc.parentNode.addEventListener('keydown', handlekey);
|
||||||
|
c.addEventListener('keydown', handlekey, true);
|
||||||
|
rc.addEventListener('keydown', handlekey, true);
|
||||||
|
//rc.parentNode.addEventListener('DOMMouseScroll', mouse_wheel);
|
||||||
|
//rc.parentNode.onmousewheel = mouse_wheel;
|
||||||
|
rc.parentNode.focus();
|
||||||
|
|
||||||
|
function mouse_wheel(event)
|
||||||
|
{
|
||||||
|
event = event||window.event;
|
||||||
|
var direction = ((event.wheelDelta) ? event.wheelDelta/120 : event.detail/-3) || false;
|
||||||
|
if (direction)
|
||||||
|
{
|
||||||
|
if (event.preventDefault)
|
||||||
|
event.preventDefault();
|
||||||
|
event.returnValue = false;
|
||||||
|
enqueue(scrollbypx, -direction * 30);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handlekey(ev)
|
||||||
|
{
|
||||||
|
if (ev.keyCode == 38 || ev.keyCode == 40 || ev.keyCode == 33 || ev.keyCode == 34) // up, down, pgup, pgdown
|
||||||
|
{
|
||||||
|
var px;
|
||||||
|
if (ev.keyCode == 38) px = -30;
|
||||||
|
else if (ev.keyCode == 40) px = 30;
|
||||||
|
else if (ev.keyCode == 33) px = -270;
|
||||||
|
else if (ev.keyCode == 34) px = 270;
|
||||||
|
enqueue(scrollbypx, px);
|
||||||
|
}
|
||||||
|
else if (ev.keyCode == 36)
|
||||||
|
s.scrollTop = 0;
|
||||||
|
else if (ev.keyCode == 35)
|
||||||
|
s.scrollTop = s.scrollHeight-s.offsetHeight+1;
|
||||||
|
else
|
||||||
|
return;
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
var rq = [];
|
||||||
|
var loadedItems = [];
|
||||||
|
|
||||||
|
function enqueue(fn, arg)
|
||||||
|
{
|
||||||
|
if (!rq.length)
|
||||||
|
fn(arg);
|
||||||
|
else if (arg)
|
||||||
|
rq.push(function() { fn(arg) });
|
||||||
|
else if (rq[rq.length-1] != fn)
|
||||||
|
rq.push(fn);
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadfrom(start, count)
|
||||||
|
{
|
||||||
|
console.log('load from '+start+': '+count+' items');
|
||||||
|
getItems(start, count, function(partItems)
|
||||||
|
{
|
||||||
|
var h, i;
|
||||||
|
for (i = 0; i < partItems.length; i++)
|
||||||
|
loadedItems[start+i] = partItems[i];
|
||||||
|
rq.length && (rq.shift())();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// скроллинг в пикселях (в пределах видимости - можно использовать для up/down, pgup/pgdown, колеса мыши)
|
||||||
|
function scrollbypx(px)
|
||||||
|
{
|
||||||
|
if (px < 0)
|
||||||
|
{
|
||||||
|
var cpx = px;
|
||||||
|
cpx += curOffset*loadedItems[curFirst];
|
||||||
|
var nf = curFirst;
|
||||||
|
while (nf > 0 && cpx < 0)
|
||||||
|
{
|
||||||
|
nf--;
|
||||||
|
if (!loadedItems[nf])
|
||||||
|
{
|
||||||
|
rq.unshift(function() { scrollbypx(px) });
|
||||||
|
loadfrom(nf+1 > pagesize ? nf+1-pagesize : 0, pagesize);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
cpx += loadedItems[nf];
|
||||||
|
}
|
||||||
|
newFirst = nf+(cpx/loadedItems[nf]);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
px -= loadedItems[curFirst]*(1-curOffset);
|
||||||
|
var nf = curFirst;
|
||||||
|
while (nf < totalItems-1 && px > 0)
|
||||||
|
{
|
||||||
|
nf++;
|
||||||
|
px -= loadedItems[nf];
|
||||||
|
}
|
||||||
|
nfo = (px >= 0 ? loadedItems[nf] : px+loadedItems[nf]);
|
||||||
|
newFirst = nf+(nfo/loadedItems[nf]);
|
||||||
|
}
|
||||||
|
s.scrollTop = newFirst/lastFirst*(s.scrollHeight-s.offsetHeight+1);
|
||||||
|
rq.length && (rq.shift())();
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadnext()
|
||||||
|
{
|
||||||
|
var h, i;
|
||||||
|
for (h = 0, i = curFirst; i < totalItems && h < s.offsetHeight; i++)
|
||||||
|
{
|
||||||
|
if (!loadedItems[i])
|
||||||
|
{
|
||||||
|
var start = i;
|
||||||
|
while (start < totalItems && !loadedItems[start] && start < i+pagesize)
|
||||||
|
start++;
|
||||||
|
start = start-pagesize;
|
||||||
|
start = start < 0 ? 0 : start;
|
||||||
|
rq.unshift(loadnext);
|
||||||
|
loadfrom(start, pagesize);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
h += (i == curFirst ? loadedItems[i]*(1-curOffset) : loadedItems[i]);
|
||||||
|
}
|
||||||
|
curCount = i-curFirst;
|
||||||
|
rq.length && (rq.shift())();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderitems()
|
||||||
|
{
|
||||||
|
var ih = '', h = 0;
|
||||||
|
for (var i = 0; i < curCount; i++)
|
||||||
|
{
|
||||||
|
ih += '<div class="item" style="height: '+loadedItems[curFirst+i]+'px">'+(curFirst+i)+'</div>';
|
||||||
|
h += loadedItems[curFirst+i];
|
||||||
|
}
|
||||||
|
// curPos, чтобы при плавном скролле вниз загруженное в середину не было видно
|
||||||
|
var t = Math.round(-loadedItems[curFirst]*curOffset+curPos);
|
||||||
|
rc.style.height = '1px'; // на случай, если браузеру вздумается где-то посередине перерисовать
|
||||||
|
rc.style.top = t+'px';
|
||||||
|
rc.style.height = (t+h < s.scrollHeight-1 ? h : s.scrollHeight-1-t)+'px';
|
||||||
|
rc.innerHTML = ih;
|
||||||
|
// Тут можно убить лишние элементы
|
||||||
|
var q0 = curFirst-pagesize;
|
||||||
|
q0 = q0 - q0%pagesize;
|
||||||
|
var q1 = curFirst+curCount+pagesize;
|
||||||
|
q1 = q1 + (pagesize-q1%pagesize);
|
||||||
|
var destroyed = 0;
|
||||||
|
for (var i in loadedItems)
|
||||||
|
{
|
||||||
|
if (i < q0 || i >= q1)
|
||||||
|
{
|
||||||
|
destroyed++;
|
||||||
|
delete loadedItems[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (destroyed > 0)
|
||||||
|
console.log('destroy '+destroyed+' items');
|
||||||
|
rq.length && (rq.shift())();
|
||||||
|
}
|
||||||
|
|
||||||
|
// нелинейный скроллинг (в % от элементов)
|
||||||
|
function scrollother()
|
||||||
|
{
|
||||||
|
var i, h;
|
||||||
|
if (s.scrollTop == curPos)
|
||||||
|
return;
|
||||||
|
var newFirst = s.scrollTop / (s.scrollHeight-s.offsetHeight+1) * lastFirst;
|
||||||
|
if (newFirst > lastFirst)
|
||||||
|
newFirst = lastFirst;
|
||||||
|
curFirst = Math.floor(newFirst);
|
||||||
|
curOffset = newFirst-curFirst;
|
||||||
|
curPos = s.scrollTop;
|
||||||
|
rq.unshift(renderitems);
|
||||||
|
loadnext();
|
||||||
|
}
|
||||||
|
|
||||||
|
function initscroll()
|
||||||
|
{
|
||||||
|
var h = 0, i;
|
||||||
|
for (i = totalItems-1; i >= 0 && h < s.offsetHeight; i--)
|
||||||
|
{
|
||||||
|
if (!loadedItems[i])
|
||||||
|
{
|
||||||
|
rq.unshift(initscroll);
|
||||||
|
loadfrom(i+1-pagesize, pagesize);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
h += loadedItems[i];
|
||||||
|
}
|
||||||
|
lastFirst = i+1+(h-s.offsetHeight)/loadedItems[i+1];
|
||||||
|
rq.length && (rq.shift())();
|
||||||
|
}
|
||||||
|
|
||||||
|
rq.push(scrollother);
|
||||||
|
initscroll();
|
||||||
|
//-->
|
||||||
|
</script>
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
const webpack = require('webpack');
|
|
||||||
const path = require('path');
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
entry: {
|
|
||||||
main: [ "babel-polyfill", './main.js' ]
|
|
||||||
},
|
|
||||||
context: __dirname,
|
|
||||||
output: {
|
|
||||||
path: __dirname,
|
|
||||||
filename: 'dist/[name].js'
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /.jsx?$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
exclude: /node_modules(?!\/react-toolbox\/components)/
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
"style-loader",
|
|
||||||
{
|
|
||||||
loader: "css-loader",
|
|
||||||
options: {
|
|
||||||
modules: true, // default is false
|
|
||||||
sourceMap: true,
|
|
||||||
importLoaders: 1,
|
|
||||||
localIdentName: "[name]--[local]--[hash:base64:8]"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"postcss-loader"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
"process.env": {
|
|
||||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV || "production")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
],
|
|
||||||
performance: {
|
|
||||||
maxEntrypointSize: 3000000,
|
|
||||||
maxAssetSize: 3000000
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue