react 实现滚动加载
Smooth Scrolling, dont know what it is? Well, 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 features on a site that makes an incredible difference in terms of aesthetics. I personally just implemented this on one of my personal sites because I love the look and feel it provides to the user.
平滑滚动,不知道它是什么? 好吧,不是单击按钮并立即转到(相同)页面的不同部分,而是通过滚动动画在此导航用户。 它是网站上那些微妙的功能之一,在美观方面产生了难以置信的变化。 我个人只是在我的一个个人网站上实现了此功能,因为我喜欢它为用户提供的外观。
That said, even though smooth scrolling might be subtle, it can be a bit tricky to implement yourself. Because of that, in this article, we are going to use the react-scroll package on NPM.
就是说,尽管平滑滚动可能很微妙,但实现自己可能有些棘手。 因此,在本文中,我们将在NPM上使用react-scroll软件包。
使用React滚动 ( Using react-scroll )
We'll be building a simple app in this tutorial, but if you want a quick rundown of how react-scroll works:
我们将在本教程中构建一个简单的应用程序,但是如果您想快速了解react-scroll的工作方式,请执行以下操作:
安装react-scroll (Install react-scroll)
npm i -S react-scroll
导入react-scroll软件包 (Import the react-scroll Package)
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应用程序。
入门 ( Getting Started )
For convenience, I've created a starter React project (using Create React App 2.0) that ha