如何优化 React 元素的滚动速度？从平滑到自定义

2024-03-17 04:02:41

优化 React 元素的滚动速度：平滑和自定义

引言

在 React 应用程序中，平滑的滚动体验对于提高用户界面 (UI) 的交互性和可用性至关重要。自定义特定元素的滚动速度可以为用户提供更流畅和愉快的体验。本文将探讨使用 CSS 样式、事件监听器和库来实现自定义滚动速度的方法。

方法

1. CSS 样式

利用 scroll-behavior CSS 属性，你可以指定滚动行为：

.custom-scroll-speed {
  scroll-behavior: smooth;
}

2. 事件监听器

使用 onwheel 事件监听器，可以动态地更新元素的滚动位置：

const element = document.getElementById("scroll-div");

element.addEventListener("wheel", (e) => {
  const deltaY = e.deltaY;
  const newScrollTop = element.scrollTop + deltaY;
  requestAnimationFrame(() => {
    element.scrollTop = newScrollTop;
  });
});

3. 库

像 react-custom-scroll 这样的库提供了现成的组件和实用程序，简化了自定义滚动速度的设置：

import { useScroll } from "react-custom-scroll";

const Projects = () => {
  const { scroll } = useScroll();

  return (
    <div style={{ overflowY: "auto" }} onScroll={scroll}>
      ...
    </div>
  );
};

示例

考虑以下示例代码，它使用事件监听器为元素自定义滚动速度：

import { useState, useEffect } from "react";

const Projects = () => {
  const [scrollSpeed, setScrollSpeed] = useState(50); // 自定义滚动速度（单位：像素/秒）

  useEffect(() => {
    const element = document.getElementById("scroll-div");

    element.addEventListener("wheel", (e) => {
      const deltaY = e.deltaY;
      const newScrollTop = element.scrollTop + deltaY * scrollSpeed;
      requestAnimationFrame(() => {
        element.scrollTop = newScrollTop;
      });
    });

    return () => {
      element.removeEventListener("wheel", handleScroll);
    };
  }, [scrollSpeed]);

  return (
    <Container
      className="projectsCont"
      sx={{
        display: "flex",
        overflowY: "auto",
      }}
      id="scroll-div"
    >
      ...
    </Container>
  );
};