在 React JS 中实现丝滑滚动

2025-06-04

在 React JS 中实现丝滑滚动

你好👋，

在本教程中，我们将在 ReactJS 中使用自定义滚动条为整个页面实现平滑🧈滚动效果🤩。

这是演示
👇 https://react-smooth-scroll.vercel.app/
（由于加载大量图像，最初加载速度可能会较慢）

现在让我们开始吧！

如果您更喜欢视频格式，那么这里就是视频👇

如果您不是初学者，并且想要在项目中实现平滑滚动，您可以直接转到步骤 2。

步骤 0：项目初始化

打开命令提示符。

使用以下命令创建您的项目目录。

npx create-react-app react-smoothscroll
Enter fullscreen mode Exit fullscreen mode

Create React App ( CRA ) 是官方支持的创建单页 React 应用的方式。它提供了无需配置的现代化构建设置。

这将创建并响应应用程序启动器并安装 React 所需的所有依赖项。

对于这个项目，我们将使用Smooth-scrollbar，所以让我们安装它，

npm install smooth-scrollbar
Enter fullscreen mode Exit fullscreen mode

现在让我们启动我们的项目服务器，
写入，

npm start
Enter fullscreen mode Exit fullscreen mode

这将在端口 3000 上启动服务器。

步骤 1：添加随机图像

首先清理您的App.js文件并删除标题部分。

现在，在实现平滑滚动之前，我们需要在应用程序中显示一些内容。

为此，我们可以逐一渲染几张图像，
您可以从这里获取各种图像：https://picsum.photos/

转到给定的网址并向下滚动以列出图像。https
://picsum.photos/v2/list

在您的浏览器中访问此 URL 并查看它的响应
此 URL 将为我们提供图像 URL 列表。

因此，让我们调用这个 url 并渲染一些图像。

打开App.js文件并写入以下代码👇

import { useEffect, useState } from 'react';
import './App.css';
function App() {
const [images,setImages] = useState();
useEffect(() => {
fetch('https://picsum.photos/v2/list?limit=10').then(res => res.json())
.then(json => {
console.log(json);
setImages(json);
});
},[])
const random = () => {
return Math.floor(Math.random()*50);
}
return (
<div className="App">
<h1 className="title">React Smooth Scroll</h1>
{
images && images.map(
img => <div style={{marginLeft:`${random()}rem`}} key={img.id} className="imgContainer">
<img src={img.download_url} alt={img.author} />
</div>
)
}
</div>
);
}
export default App;
view raw React-Smooth-Scroll.js hosted with ❤ by GitHub

行号：6👉在这里我初始化了一个状态images来存储图像。

第 8 行👉useEffect我获取了提供 JSON 格式图像数据的 URL。将响应 (res) 转换为 JSON 后，我们将使用此 JSON 数据设置图像状态。

JSON数据的格式：

[
    {
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
    }
]
Enter fullscreen mode Exit fullscreen mode

第 25 行👉 在 return 语句中，当图像状态不是 undefined 时，我们将使用 map 函数渲染图像。
这里，所有图像都包装在带有类 image 容器的 div 中。

为了让图片在整个页面上保持分散，我使用了随机函数来随机设置其边距。（正如您在演示页面中看到的那样）

行号：27 👉 在 src 中传递 download_url 并在 alt 标签中传递 author 。

在文件中写入以下 css 代码App.css。

.App {
display:flex;
flex-direction: column;
padding:5rem;
}

.title{
  text-transform: uppercase;
  align-self: center;
  margin-bottom:8rem;
  font-size:4vw;
}

.imgContainer{
  max-width:50vw;
  margin:4rem 0;
}

img{
  width:100%;
  height:auto;
}
Enter fullscreen mode Exit fullscreen mode

步骤 2：实现平滑滚动

在 src 中创建 components 文件夹。

在组件文件夹中创建名为 SmoothScroll.js 的文件

写下下面的代码，

  const Scroll = () => {

    return null;
}

export default Scroll;
Enter fullscreen mode Exit fullscreen mode

从 Smooth-scrollbar 导入滚动条。

import Scrollbar from 'smooth-scrollbar';
Enter fullscreen mode Exit fullscreen mode

我们在 useEffect 中初始化它。

以下是添加平滑滚动条的语法，

Scrollbar.init(document.querySelector('#my-scrollbar'), options);
Enter fullscreen mode Exit fullscreen mode

在 init 函数中传递您想要实现平滑滚动的元素。

在第二个参数中，您可以传递此处列出的各种选项，

您还可以在此现场演示中尝试不同的选项，
https://idiotwu.github.io/smooth-scrollbar/

现在让我们将其添加到滚动组件中。

const options = {
    damping : 0.07,
  }

    useEffect(() => {

    Scrollbar.init(document.body, options);   

    return () => {
       if (Scrollbar) Scrollbar.destroy(document.body)
    }  },[])
Enter fullscreen mode Exit fullscreen mode

在 useEffect 中，我们希望在整个页面中创建平滑滚动，因此在第一个参数中传递document.body 。

而在第二个参数中传递我们已经定义的选项。

在 useEffect 的返回中，
当组件卸载时我们将使用方法销毁 Scrollbar 实例destroy()。

在文件中导入滚动组件，App.js如下所示，

...
  return (
    <div className="App">
      <h1 className="title">React Smooth Scroll</h1>
      <Scroll /> {/*👈 Like this*/}
   ...
Enter fullscreen mode Exit fullscreen mode

现在我们必须设置身体的高度和宽度，否则这将不起作用。

打开index.css文件并在正文中添加高度和宽度。

body {
  margin: 0;
  height:100vh;
  width:100vw;
}
Enter fullscreen mode Exit fullscreen mode

正如你所见，它正在发挥作用🤩

步骤 3：添加 Overscroll 插件

现在，如果您想要在有人点击滚动结束时产生发光或弹跳的效果，那么您应该实现 Overscroll 插件。

打开SmoothScroll.js文件，并从 Smooth-scrollbar 导入此插件。

import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';
Enter fullscreen mode Exit fullscreen mode

请参阅下面的代码和解释。

第 8 行👉 Overscroll 插件选项

行号：27 👉 在主选项对象中添加 Overscroll 插件及其选项。

行号：37👉在这里我们使用了Scrollbar.use()方法来使用 Overscroll 插件。

就是这样。现在你可以看到滚动条到达末端时平滑的弹跳。

如果您想实现发光效果，只需取消注释第 16 行的代码并注释掉当前的滚动选项。

您可以从这里使用该库提供的各种方法。

本教程的完整代码👉 https://github.com/codebucks27/react-smooth-scroll

如果您有任何疑问，请在评论中提问

点击以下链接🤩获取更多资源💻（每周更新）👇
https://linktr.ee/codebucks

感谢阅读😄

欢迎访问我的 YouTube 频道：

@CodeBucks

文章来源：https://dev.to/codebucks/implement-silky-smooth-scrolling-in-react-js-46fn
Devto 翻译
PREV
React 中的高阶组件（HOC）是什么？
NEXT
几分钟内从 Figma 到 Next.js 应用