Cách triển khai Smooth Scrolling trong React
Cuộn mượt là khi thay vì nhấp vào một nút và được đưa ngay đến phần khác của cùng một trang, user được chuyển đến đó thông qua hoạt ảnh cuộn. Đó là một trong những tính năng giao diện user tinh tế trên một trang web tạo ra sự khác biệt về mặt thẩm mỹ. Trong bài viết này, bạn sẽ sử dụng gói react react-scroll trên npm để thực hiện thao tác cuộn mượt mà.
Yêu cầu
Bạn cần những thứ sau để hoàn thành hướng dẫn này:
- Cài đặt Git hợp lệ. Để cài đặt điều này, hãy xem lại hướng dẫn Bắt đầu với Git .
- Node.js được cài đặt local mà bạn có thể thực hiện theo hướng dẫn Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ .
Hướng dẫn này đã được xác minh với Node v13.14.0, v6.14.5 NPM, react v16.13.1, và react-scroll v.1.7.16.
Bắt đầu nhanh: Sử dụng react-scroll
Bạn sẽ xây dựng một ứng dụng đơn giản trong hướng dẫn này, nhưng nếu bạn muốn tóm tắt nhanh về cách hoạt động của react-scroll , hãy tham khảo các bước cô đọng sau:
Cài đặt react-scroll :
npm i -S react-scroll Nhập gói react-scroll :
import { Link, animateScroll as scroll } from "react-scroll"; Thêm thành phần liên kết. Thành phần <Link /> sẽ trỏ đến một khu vực nhất định trong ứng dụng của bạn:
<Link to="section1"> Hãy đi sâu hơn và xây dựng một ứng dụng React nhỏ với khả năng cuộn mượt mà.
Bước 1 - Cài đặt và chạy ứng dụng React
Để thuận tiện, hướng dẫn này sẽ sử dụng một dự án React mới bắt đầu (sử dụng Create React App 2.0) có thanh chuyển (hoặc thanh chuyển ) ở trên cùng cùng với năm phần nội dung khác nhau.
Các liên kết trong thanh chuyển tại thời điểm này chỉ là các thẻ liên kết, nhưng bạn sẽ sớm cập nhật chúng để cho phép cuộn mượt mà.
Bạn có thể tìm thấy dự án tại React With Smooth Scrolling . Xin lưu ý liên kết này dành cho chi nhánh bắt đầu . Các chi nhánh tổng thể bao gồm tất cả những thay đổi đã hoàn thành.
Để sao chép dự án, bạn có thể sử dụng lệnh sau:
git clone https://github.com/do-community/React-With-Smooth-Scrolling.git Nếu bạn nhìn vào folder src/Components , bạn sẽ tìm thấy file Navbar.js có chứa <Navbar> với nav-items tương ứng với năm <Section> khác nhau.
import React, { Component } from "react"; import logo from "../logo.svg"; export default class Navbar extends Component { render() { return ( <nav className="nav" id="navbar"> <div className="nav-content"> <img src={logo} className="nav-logo" alt="Logo." onClick={this.scrollToTop} /> <ul className="nav-items"> <li className="nav-item">Section 1</li> <li className="nav-item">Section 2</li> <li className="nav-item">Section 3</li> <li className="nav-item">Section 4</li> <li className="nav-item">Section 5</li> </ul> </div> </nav> ); } } Sau đó, nếu bạn mở file App.js trong folder src , bạn sẽ thấy nơi chứa <Navbar> cùng với năm <Section> thực tế "
import React, { Component } from "react"; import logo from "./logo.svg"; import "./App.css"; import Navbar from "./Components/Navbar"; import Section from "./Components/Section"; import dummyText from "./DummyText"; class App extends Component { render() { return ( <div className="App"> <Navbar /> <Section title="Section 1" subtitle={dummyText} dark={true} id="section1" /> <Section title="Section 2" subtitle={dummyText} dark={false} id="section2" /> <Section title="Section 3" subtitle={dummyText} dark={true} id="section3" /> <Section title="Section 4" subtitle={dummyText} dark={false} id="section4" /> <Section title="Section 5" subtitle={dummyText} dark={true} id="section5" /> </div> ); } } export default App; Mỗi thành phần <Section> có một title và subtitle .
Vì dự án này đang sử dụng văn bản giả trong các phần khác nhau, để giảm mã lặp lại, văn bản này đã được thêm vào file DummyText.js , được nhập và chuyển vào từng thành phần <Section> .
Để chạy ứng dụng, bạn có thể sử dụng các lệnh sau.
- cd React-With-Smooth-Scrolling
- npm install
- npm start
Thao tác này sẽ khởi động ứng dụng ở chế độ phát triển và tự động làm mới ứng dụng khi bạn lưu file của bạn . Bạn có thể xem nó trong trình duyệt tại localhost:3000 .
Bước 2 - Cài đặt và cấu hình React-Scroll
Bây giờ đã đến lúc cài đặt gói react-scroll và thêm chức năng đó. Bạn có thể tìm thông tin cho gói trên npm .
Để cài đặt gói, hãy chạy lệnh sau:
- npm install react-scroll
Tiếp theo, mở file Navbar.js backup và thêm import cho hai mục nhập có tên là Link và animateScroll .
import { Link, animateScroll as scroll } from "react-scroll"; Chú ý rằng tôi đã aliased animatedScroll để scroll để dễ sử dụng.
Với tất cả các lần nhập của bạn đã được xác định, bây giờ bạn có thể cập nhật các mục nav-items của bạn để sử dụng thành phần <Link> . Thành phần này có một số thuộc tính. Bạn có thể đọc về tất cả chúng trên trang tài liệu .
Hiện tại, hãy đặc biệt chú ý đến activeClass , to , spy , smooth , offset và duration .
-
activeClass- Lớp được áp dụng khi đến phần tử. -
to- Mục tiêu để cuộn đến. -
spy- Để chọnLinkkhiscrollở vị trí của mục tiêu. -
smooth- Để tạo hiệu ứng cho cuộn. -
offset- Để cuộn thêm px (như padding). -
duration- Thời gian của hoạt ảnh cuộn. Đây có thể là một số hoặc một hàm.
Thuộc tính to là phần quan trọng nhất vì nó cho thành phần biết phần tử nào sẽ cuộn đến. Trong trường hợp này, đây sẽ là từng <Section> của bạn.
Với thuộc tính offset , bạn có thể xác định số lượng cuộn bổ sung cần thực hiện để đến từng <Section> .
Đây là một ví dụ về các thuộc tính mà bạn sẽ sử dụng cho từng thành phần <Link> . Sự khác biệt duy nhất giữa họ sẽ là to sở hữu như họ từng điểm đến một khác nhau <Section> :
<Link activeClass="active" to="section1" spy={true} smooth={true} offset={-70} duration={500} > Bạn cần cập nhật từng mục nav-items phù hợp. Với những điều này được thêm vào, bạn có thể quay lại trình duyệt của bạn (ứng dụng của bạn lẽ ra đã tự động khởi động lại rồi) và thấy thao tác cuộn mượt mà.
Bước 3 - Tạo kiểu liên kết hoạt động
activeClass tính activeClass cho phép bạn xác định một lớp để áp dụng cho thành phần <Link> khi phần tử to của nó đang hoạt động. Một <Link> được coi là hoạt động nếu phần tử to của nó được xem gần đầu trang. Điều này có thể được kích hoạt bằng cách nhấp vào chính <Link> hoặc bằng cách cuộn xuống <Section> theo cách thủ công.
Để chứng minh điều này, tôi đã mở Chrome DevTools và kiểm tra <Link> thứ năm như được hiển thị bên dưới. Khi tôi nhấp vào <Link> hoặc cuộn xuống cuối trang theo cách thủ công, tôi nhận thấy rằng trên thực tế, lớp đang hoạt động được áp dụng.
Để tận dụng lợi thế này, bạn có thể tạo một lớp đang hoạt động và thêm dấu gạch dưới vào liên kết. Bạn có thể thêm bit CSS này vào file App.css trong folder src :
.nav-item > .active { border-bottom: 1px solid #333; } Bây giờ, nếu bạn quay lại trình duyệt của bạn và cuộn xung quanh một chút, bạn sẽ thấy <Link> thích hợp được gạch dưới.
Bước 4 - Thêm các chức năng bổ sung
Đối với một phần nội dung cuối cùng, gói này cũng cung cấp một số hàm có thể được gọi trực tiếp như scrollToTop , scrollToBottom , v.v. Cũng như các sự kiện khác nhau mà bạn có thể xử lý.
Thông thường, khi tham chiếu đến các chức năng này, biểu trưng ứng dụng trong thanh chuyển sẽ đưa user đến trang chủ hoặc đầu trang hiện tại.
Như một ví dụ đơn giản về cách gọi một trong những hàm được cung cấp này, tôi đã thêm một trình xử lý nhấp chuột vào nav-logo để cuộn user trở lại đầu trang, như sau:
scrollToTop = () => { scroll.scrollToTop(); }; Quay lại trình duyệt, bạn có thể cuộn xuống trang, nhấp vào biểu trưng trên thanh chuyển và được đưa trở lại đầu trang.
Kết luận
Cuộn mượt mà là một trong những tính năng có thể tăng thêm nhiều giá trị thẩm mỹ cho ứng dụng của bạn. Gói react-scroll cho phép bạn tận dụng tính năng này mà không có chi phí đáng kể.
Trong hướng dẫn này, bạn đã thêm tính năng cuộn mượt mà vào ứng dụng và thử nghiệm với các cài đặt khác nhau. Nếu bạn tò mò, hãy dành thời gian khám phá các chức năng và sự kiện khác mà gói này cung cấp.
Các tin liên quan
