Virtual Scroll - WebComponent

DEMO

• example 1

Usage

Install Dep

npm i @bfchain/virtual-scroll --save
yarn add @bfchain/virtual-scroll

moderns web dev

For Angular/React/Vue/Preact etc.

import "@bfchain/virtual-scroll";

or include directly

For vanillajs

<script src="./node_modules/@bfchain/virtual-scroll/dist/vitrual-scroll.iife.js"></script>

then you can use the component in your html

<scroll-viewport>
  <fixed-size-virtual-list-s1
    id="l"
    item-size="200"
    item-count="1000000"
    safe-area-inset-top="400"
    safe-area-inset-bottom="100"
    onrenderrangechange="rangeChange(event)"
  >
    <div class="block-card-item" slot="template">
      <div class="block-content">
        <div class="height">Height: <span name="height"></span></div>
      </div>
      <div class="chain-link"></div>
    </div>
    <virtual-list-custom-item item-size="400">
      <div class="my-sliders">
        <div class="slider-item">This is Banner!</div>
      </div>
    </virtual-list-custom-item>
    <virtual-list-custom-item position-top="800" item-size="200">
      <div class="my-sliders">
        <div class="slider-item">rethink, this is grid.</div>
      </div>
    </virtual-list-custom-item>
  </fixed-size-virtual-list-s1>
</scroll-viewport>

Document

1. <scroll-viewport>

   viewport for virtual scroll.

   • @slot - This element has a slot
2. <fixed-size-virtual-list-s1>/<fixed-size-virtual-list-s2>

   virtual scroll list with fixed size.

   • s1 means has only one scrollbar to capture two direction scroll.
   • s2 means has two scrollbar for two direction scroll (maybe you will need it).

   • @slot - for custom list item
   • @slot template - for buildable item
   • @csspart scroll-ctrl - (s1) the scroll controller
   • @csspart scroll-up - (s2) the scroll up controller
   • @csspart scroll-down - (s2) the scroll down controller
   • @csspart virtual-list-view - the scroll item container
   • @fires renderrangechange - when scroll, the item will need render changed
   • @attr {bigint} item-count -
   • @attr {number} item-size -
   • @attr {number} safe-area-inset-top - like padding-top
   • @attr {number} safe-area-inset-bottom - like padding-bottom
   • @attr {number} cache-render-top - will make list-view higher, for render more item. if item content overflow, you may need change this to make it render correctly
   • @attr {number} cache-render-bottom - will make list-view higher, for render more item. like {cache-render-top}
   • @method refresh() - if you change the attr directly by set property. you may need call the method
   • @prop {bigint} virtualScrollTop - change the scroll top. without animation
3. <virtual-list-custom-item>

   custom item in virtual scroll list

   • @slot - for custom list item
   • @attr {bigint} position-top - the posiction in virtual scroll list
   • @attr {number} item-size - the item height

ISSUES

1. because of scroll-ctrl behavior base on scroll-snap, but Firefox and WebKit don't behave the same. so in firebox you need use controlbar but no mousewheel.

TODO

• [x] fixed-size-virtual-list 重构成 LitElement
• [x] 抽象出 common-fixed-size-virtual-list-builder 以扩展多种不同滚动策略
• [ ] fixed-size-virtual-list 需要正确区分 create / visible / hidden / destroy 四种状态
• [ ] create 与 destroy 发生的时候，如果该元素不在页面中，不应该发生滚动
• [ ] 实现 pushCount(newCount:bigint), insertCount(newCount:bigint, refIndex = 0n)
• [ ] 实现 scrollToIndex(index:bigint)
• [ ] 支持 scroll-behavior: smooth
• [x] 滚动的平滑衰减应该基于帧时间而不是基于帧数