├── .vscode
    └── settings.json
├── README.md
├── VirtualScroller.js
├── index.html
├── index.js
└── style.css


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # virtual-scroller
2 | 
3 | **Online demo: https://codesteppe.github.io/virtual-scroller/**


--------------------------------------------------------------------------------
/VirtualScroller.js:
--------------------------------------------------------------------------------
  1 | function throttle(fn, wait) {
  2 |   let lastTime = 0;
  3 |   let timer;
  4 |   return function (...args) {
  5 |     function run() {
  6 |       const now = new Date().valueOf();
  7 |       if (now - lastTime > wait) {
  8 |         fn.apply(this, args);
  9 |         lastTime = now;
 10 |       }
 11 |     }
 12 |     if (timer) {
 13 |       clearTimeout(timer);
 14 |     }
 15 |     timer = setTimeout(run, wait);
 16 |     run();
 17 |   }
 18 | }
 19 | 
 20 | class VirtualScroller {
 21 |   constructor({
 22 |     element,
 23 |     height,
 24 |     rowHeight,
 25 |     pageSize,
 26 |     buffer,
 27 |     renderItem,
 28 |     loadMore
 29 |   }) {
 30 |     if (typeof element === 'string') {
 31 |       this.scroller = document.querySelector(element);
 32 |     } else if (element instanceof HTMLElement) {
 33 |       this.scroller = element;
 34 |     }
 35 | 
 36 |     if (!this.scroller) {
 37 |       throw new Error('Invalid element');
 38 |     }
 39 | 
 40 |     if (!height || (typeof height !== 'number' && typeof height !== 'string')) {
 41 |       throw new Error('invalid height value');
 42 |     }
 43 | 
 44 |     if (!rowHeight || typeof rowHeight !== 'number') {
 45 |       throw new Error('rowHeight should be a number');
 46 |     }
 47 | 
 48 |     if (typeof renderItem !== 'function') {
 49 |       throw new Error('renderItem is not a function');
 50 |     }
 51 | 
 52 |     if (typeof loadMore !== 'function') {
 53 |       throw new Error('renderItem is not a function');
 54 |     }
 55 | 
 56 |     // set props
 57 |     this.height = height;
 58 |     this.rowHeight = rowHeight;
 59 |     this.pageSize = typeof pageSize === 'number' && pageSize > 0 ? pageSize : 50;
 60 |     this.buffer = typeof buffer === 'number' && buffer >= 0 ? buffer : 10;
 61 |     this.renderItem = renderItem;
 62 |     this.loadMore = loadMore;
 63 |     this.data = [];
 64 | 
 65 |     // create content box
 66 |     const contentBox = document.createElement('div');
 67 |     this.contentBox = contentBox;
 68 |     this.scroller.append(contentBox);
 69 | 
 70 |     this.scroller.style.height = typeof height === 'number' ? height + 'px' : height;
 71 | 
 72 |     this.#loadInitData();
 73 |     this.scroller.addEventListener('scroll', throttle(this.#handleScroll, 150));
 74 |   }
 75 | 
 76 |   #topHiddenCount = 0;
 77 |   #bottomHiddenCount = 0;
 78 |   #scrollTop = 0;
 79 |   #paddingTop = 0;
 80 |   #paddingBottom = 0;
 81 |   #lastVisibleItemIndex = 0;
 82 | 
 83 |   #loadInitData() {
 84 |     const scrollerRect = this.scroller.getBoundingClientRect();
 85 |     const minCount = Math.ceil(scrollerRect.height / this.rowHeight);
 86 |     const page = Math.ceil(minCount / this.pageSize);
 87 |     const newData = this.loadMore(page * this.pageSize);
 88 |     this.data.push(...newData);
 89 |     this.#renderNewData(newData);
 90 |   }
 91 | 
 92 |   #renderRow(item) {
 93 |     const rowContent = this.renderItem(item);
 94 |     const row = document.createElement('div');
 95 |     row.dataset.index = item
 96 |     row.style.height = this.rowHeight + 'px';
 97 |     row.appendChild(rowContent)
 98 |     return row;
 99 |   }
100 | 
101 |   #renderNewData(newData) {
102 |     newData.forEach(item => {
103 |       this.contentBox.append(this.#renderRow(item));
104 |     });
105 |   }
106 | 
107 |   #handleScroll = (e) => {
108 |     const { clientHeight, scrollHeight, scrollTop } = e.target;
109 |     if (scrollHeight - (clientHeight + scrollTop) < 40) {
110 |       console.log('load more');
111 |       const newData = this.loadMore(this.pageSize);
112 |       this.data.push(...newData);
113 |     }
114 |     const direction = scrollTop > this.#scrollTop ? 1 : -1;
115 |     this.#toggleTopItems(direction);
116 |     this.#toggleBottomItems(direction);
117 |     this.#scrollTop = scrollTop;
118 |     console.log({
119 |       direction,
120 |       topHiddenCount: this.#topHiddenCount,
121 |       lastVisibleItemIndex: this.#lastVisibleItemIndex
122 |     });
123 |   }
124 | 
125 |   #toggleTopItems = (direction) => {
126 |     const { scrollTop } = this.scroller;
127 |     const firstVisibleItemIndex = Math.floor(scrollTop / this.rowHeight);
128 |     const firstExistingItemIndex = Math.max(0, firstVisibleItemIndex - this.buffer);
129 |     const rows = this.contentBox.children;
130 |     // replace invisible top items with padding top
131 |     if (direction === 1) {
132 |       for (let i = this.#topHiddenCount; i < firstExistingItemIndex; i++) {
133 |         if (rows[0]) rows[0].remove();
134 |       }
135 |     }
136 |     // restore hidden top items
137 |     if (direction === -1) {
138 |       for (let i = this.#topHiddenCount - 1; i >= firstExistingItemIndex; i--) {
139 |         const item = this.data[i];
140 |         const row = this.#renderRow(item);
141 |         this.contentBox.prepend(row);
142 |       }
143 |     }
144 |     this.#topHiddenCount = firstExistingItemIndex;
145 |     this.#paddingTop = this.#topHiddenCount * this.rowHeight;
146 |     this.contentBox.style.paddingTop = this.#paddingTop + 'px';
147 |   }
148 | 
149 |   #toggleBottomItems = (direction) => {
150 |     const { scrollTop, clientHeight } = this.scroller;
151 |     const lastVisibleItemIndex = Math.floor((scrollTop + clientHeight) / this.rowHeight);
152 |     const lastExistingItemIndex = lastVisibleItemIndex + this.buffer;
153 |     this.#lastVisibleItemIndex = lastVisibleItemIndex;
154 |     const rows = [...this.contentBox.children];
155 |     // replace invisible bottom items with padding bottom
156 |     if (direction === -1) {
157 |       for (let i = lastExistingItemIndex + 1; i <= this.data.length; i++) {
158 |         const row = rows[i - this.#topHiddenCount];
159 |         if (row) row.remove();
160 |       }
161 |     }
162 |     // restore hidden bottom items
163 |     if (direction === 1) {
164 |       for (let i = this.#topHiddenCount + rows.length; i <= lastExistingItemIndex; i++) {
165 |         const item = this.data[i];
166 |         if (!item) break;
167 |         const row = this.#renderRow(item);
168 |         this.contentBox.append(row);
169 |       }
170 |     }
171 |     this.#bottomHiddenCount = Math.max(0, this.data.length - (this.#topHiddenCount + this.contentBox.children.length) - this.buffer);
172 |     this.#paddingBottom = this.#bottomHiddenCount * this.rowHeight;
173 |     this.contentBox.style.paddingBottom = this.#paddingBottom + 'px';
174 |   }
175 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Virtual Scroller</title>
 9 |   <link rel="stylesheet" href="./style.css">
10 | </head>
11 | 
12 | <body>
13 | 
14 |   <div id="virtual-scroller"></div>
15 | 
16 |   <script src="./VirtualScroller.js"></script>
17 |   <script src="./index.js"></script>
18 | 
19 | </body>
20 | 
21 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | function fetchData(pageSize) {
 2 |   for (let i = 0; i < pageSize; i++) {
 3 |     const dataItem = dummyText.substring(0, Math.round(20 + Math.random() * dummyText.length) * 0.3);
 4 |     const length = data.push(dataItem);
 5 |     renderItem(dataItem, length - 1);
 6 |   }
 7 | }
 8 | 
 9 | const virtualScroller = new VirtualScroller({
10 |   element: '#virtual-scroller',
11 |   height: '80vh',
12 |   rowHeight: 60, // px
13 |   pageSize: 100,
14 |   buffer: 10,
15 |   renderItem: function (dataItem) {
16 |     const div = document.createElement('div');
17 |     div.classList.add('row-content');
18 |     div.textContent = dataItem;
19 |     return div;
20 |   },
21 |   loadMore: function (pageSize) {
22 |     const data = [];
23 |     for (let i = 0; i < pageSize; i++) {
24 |       const dataItem = `I'm number ${this.data.length + i}`;
25 |       data.push(dataItem);
26 |     }
27 |     return data;
28 |   }
29 | });


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | #virtual-scroller {
 8 |   background-color: #f0f2f7;
 9 |   overflow: auto;
10 | }
11 | 
12 | .row-content {
13 |   height: 100%;
14 |   display: flex;
15 |   align-items: center;
16 |   justify-content: center;
17 |   font-size: 36px;
18 |   border-bottom: 1px solid #c4c4c4;
19 | }
20 | 


--------------------------------------------------------------------------------