react 实现滚动加载_如何在React中实现平滑滚动

react 实现滚动加载

介绍 (Introduction)

Smooth scrolling is when instead of clicking on a button and being instantly taken to a different part of the same page, the user is navigated there via a scroll animation. It’s one of those subtle UI features on a site that makes an aesthetic difference.

平滑滚动是指当用户单击滚动动画而不是单击按钮并立即转到同一页面的不同部分时。 它是网站上那些微妙的UI功能之一，在美学上有所作为。

In this article, you are going to use the react-scroll package on npm to implement smooth scrolling.

在本文中，您将在npm上使用react-scroll包来实现平滑滚动。

先决条件 (Prerequisites)

You will need the following to complete this tutorial:

您将需要以下内容才能完成本教程：

• A valid Git installation. To set this up, review the Getting Started with Git tutorial.

  有效的Git安装。 要进行设置，请查看Git入门教程。

• Node.js installed locally, which you can do by following the How to Install Node.js and Create a Local Development Environment tutorial.

  Node.js在本地安装，您可以按照“ 如何安装Node.js和创建本地开发环境”教程中的步骤进行操作。

This tutorial was verified with Node v13.14.0, npm v6.14.5, react v16.13.1, and react-scroll v.1.7.16.

本教程已通过Node v13.14.0，npm v6.14.5， react v16.13.1和react-scroll v.1.7.16进行了验证。

快速入门：使用react-scroll (Quickstart: Using react-scroll)

You’ll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works, feel free to reference these condensed steps:

您将在本教程中构建一个简单的应用程序，但是如果要快速了解react-scroll工作原理，请随时参考以下简要步骤：

Install react-scroll:

安装react-scroll ：

npm i -S react-scroll

Import the react-scroll package:

导入react-scroll软件包：

import { Link, animateScroll as scroll } from "react-scroll";

Add the link component. The <Link /> component will point to a certain area of your app:

添加链接组件。 <Link />组件将指向您应用程序的特定区域：

<Link to="section1">

Let’s take a deeper dive and build a little React app with smooth scrolling.

让我们更深入地研究，并通过平滑滚动构建一个小的React应用程序。

第1步—安装并运行React App (Step 1 — Install and Run a React App)

For convenience, this tutorial will use a