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

滚动条组件
参考：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">
      <Scrollbars
        style={{ 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>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

也可以在我写的demo上修改调试：https://codesandbox.io/s/react-custom-scrollbars-gf3fh?file=/src/App.js

秀一下最近做的一个大屏（昨天晚上发现左侧组件写的有bug，参照同事的左右滚动组件写的上下滚动，但是用的ahooks的API不是很好同时兼顾点击滚动一屏并且还能够鼠标滚动，所以又临时换组件，肝到了十一点555）：