https://github.com/biubiukam/better-scrollbar
自定义滚动条、滚动容器、虚拟滚动
https://github.com/biubiukam/better-scrollbar
customizable react scroll scrollbar scrolling scrollview
Last synced: about 1 year ago
JSON representation
自定义滚动条、滚动容器、虚拟滚动
- Host: GitHub
- URL: https://github.com/biubiukam/better-scrollbar
- Owner: biubiukam
- License: mit
- Created: 2023-12-06T10:41:44.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-05T04:16:48.000Z (over 2 years ago)
- Last Synced: 2025-04-11T18:16:00.180Z (about 1 year ago)
- Topics: customizable, react, scroll, scrollbar, scrolling, scrollview
- Language: HTML
- Homepage: https://kampiu.github.io/better-scrollbar/
- Size: 491 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# better-scrollbar
[](https://coveralls.io/github/kampiu/better-scrollbar?branch=master)
Highly customizable, high-performance virtual list for big data rendering.
Feel free to provide feedback if there are any issues, and promptly synchronize problem handling.
## Installation
```bash
npm install better-scrollbar --save
```
## Usage
```javascript
import React, { Component } from "react"
import ScrollBar from "better-scrollbar"
import "better-scrollbar/dist/BetterScrollbar.min.css"
class App extends Component {
render() {
return (
Some great content...
)
}
}
```
The `` component is completely customizable. Check out the following code:
```javascript
import React, { Component } from "react"
import ScrollBar from "better-scrollbar"
import "better-scrollbar/dist/BetterScrollbar.min.css"
class CustomScrollBar extends Component {
render() {
return (
)
}
}
```
### If you are a tree level structure, you can use the following code:
```tsx
import React from "react"
import ScrollBar from "better-scrollbar"
import "better-scrollbar/dist/BetterScrollbar.min.css"
interface Node {
id: string
name: string
next?: Array
}
const renderList = (props: Node): Array => {
const component =
{ props.name }
const nodesList = [component]
if (props?.next && props?.next) {
props?.next?.map((node) => nodesList.push(...renderList(node)))
}
return nodesList
}
export default () => {
const tree: Node = {id: "1", name: "demo"}
return (
{ renderList(tree) }
)
}
```
## Examples
Run the simple example:
```bash
# Make sure that you've installed the dependencies
npm install
npm run site:dev
```
## License
MIT