https://github.com/bioforestchain/virtual-scroll

Virtual-Scroll ❤️ WebComponent
https://github.com/bioforestchain/virtual-scroll

virtual-scroll

Last synced: 5 months ago
JSON representation

Virtual-Scroll ❤️ WebComponent

• Host: GitHub
• URL: https://github.com/bioforestchain/virtual-scroll
• Owner: BioforestChain
• License: mit
• Created: 2021-08-24T08:33:26.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-09T03:58:41.000Z (over 4 years ago)
• Last Synced: 2025-03-21T11:50:59.802Z (11 months ago)
• Topics: virtual-scroll
• Language: TypeScript
• Homepage: https://bioforestchain.github.io/virtual-scroll/
• Size: 239 KB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Virtual Scroll - WebComponent

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/owner/my-element)

## DEMO

- [example 1](https://bioforestchain.github.io/virtual-scroll/)

## Usage

**Install Dep**

```bash

npm i @bfchain/virtual-scroll --save

yarn add @bfchain/virtual-scroll

```

**moderns web dev**

> For Angular/React/Vue/Preact etc.

```ts

import "@bfchain/virtual-scroll";

```

**or include directly**

> For vanillajs

```html

```

**then you can use the component in your html**

```html

  

    


      


        
Height: 



      

      


    

    

      


        
This is Banner!

      

    

    

      


        
rethink, this is grid.

      

    

  


```

## Document

1. ``

   > viewport for virtual scroll.

   - `@slot` - This element has a slot

2. ``/``

   > 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. ``

   > 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] 滚动的平滑衰减应该基于帧时间而不是基于帧数