react-custom-scrollbars 滚动条组件的简单实现

article/2025/9/12 0:09:36

滚动条组件
参考：gitHub API说明以及大佬的API中文讲解

import "./styles.css";
import React, { useState, useEffect, useRef, useMemo } from "react";
import { Scrollbars } from "react-custom-scrollbars";export default function App() {const ref = useRef(null);const [top, setTop] = useState(0);const [scrollTop, setScrollTop] = useState(0);const canToBottom = useMemo(() => {if (top !== 1) {return true;}return false;}, [top]);const canToTop = useMemo(() => {if (top !== 0) {return true;}return false;}, [top]);const toTop = () => {ref.current.scrollTop(scrollTop - 100);};const toButtom = () => {ref.current.scrollTop(100 + scrollTop);};const handleUpdate = (val) => {setTop(val.top);setScrollTop(val.scrollTop);};return (<div className="App"><Scrollbarsstyle={{ height: 300 }}onUpdate={handleUpdate}ref={ref}><p>世间纷乱复杂，我们在不断给自身做“加法”的同时，也要学会对周围的事物做“减法”，将复杂的东西简化，为我所用，并发挥超出原本程度的增幅效果，这才是真正的“高手”。在“码农圈”，学习如何使用.map()、.filter()和.reduce()函数，我们读到、看到和听到的一切都很复杂，无法理解这些概念，因为它们是独立的学习单元。听说这些是意味着上升至启蒙状态的入门知识。真希望自己听到的是实话：早点明白这三种方法其实都是识别和实现过程，循环遍历迭代的原因通常属于三个功能类别之一。回顾之前编写的代码，笔者发现95%的情况下，在对字符串或数组进行循环时，自己都会执行以下操作之一:将语句序列映射(map)到每个值，过滤(filter)满足特定条件的值，或者将数据集减少(reduce)到单个聚合值。这是取得进步的关键时刻，Map、filter和reduce只需要执行其中的一个任务即可！在三个月后回顾代码时，我们的阅读将变得更轻松。不必阅读for循环中的语句，只需理解它的高级意图，就可以看到map/filter/reduce方法，并能开始对该块试图实现的目标有所想法了。就像“哥伦布发现新大陆”一般，面对如此大的进步，我兴奋不已，你呢？世间纷乱复杂，我们在不断给自身做“加法”的同时，也要学会对周围的事物做“减法”，将复杂的东西简化，为我所用，并发挥超出原本程度的增幅效果，这才是真正的“高手”。在“码农圈”，学习如何使用.map()、.filter()和.reduce()函数，我们读到、看到和听到的一切都很复杂，无法理解这些概念，因为它们是独立的学习单元。听说这些是意味着上升至启蒙状态的入门知识。真希望自己听到的是实话：早点明白这三种方法其实都是识别和实现过程，循环遍历迭代的原因通常属于三个功能类别之一。回顾之前编写的代码，笔者发现95%的情况下，在对字符串或数组进行循环时，自己都会执行以下操作之一:将语句序列映射(map)到每个值，过滤(filter)满足特定条件的值，或者将数据集减少(reduce)到单个聚合值。这是取得进步的关键时刻，Map、filter和reduce只需要执行其中的一个任务即可！在三个月后回顾代码时，我们的阅读将变得更轻松。不必阅读for循环中的语句，只需理解它的高级意图，就可以看到map/filter/reduce方法，并能开始对该块试图实现的目标有所想法了。就像“哥伦布发现新大陆”一般，面对如此大的进步，我兴奋不已，你呢？</p></Scrollbars>{canToBottom && <button onClick={toButtom}>向下</button>}{canToTop && <button onClick={toTop}>向上</button>}</div>);
}