В этой статье мы рассмотрим 2 различных способа прокрутки представления в React.
Настройка проекта
Сначала создайте проект react, выполнив следующую команду:
npx create-react-app react-scroll-into-view
Прокрутка с использованием чистого HTML и CSS
Обновите index.css со следующими стилями:
body {
max-width: 900px;
margin: 10px auto;
}
.App {
display: flex;
justify-content: center;
flex-direction: column;
}
.section {
height: 100vh;
}
header {
display: flex;
justify-content: center;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
position: fixed;
top: 0;
background-color: white;
}
li a {
padding: 1rem;
text-decoration: none;
}
Теперь обновите App.js со следующим кодом:
function App() {
return (
<div className="App">
<header>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#products">Products</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#about-us">About Us</a>
</li>
</ul>
</header>
<div className="section" id="home">
<h2>Home</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
Nisi officia, placeat, enim quibusdam nostrum similique atque
accusantium natus sit molestias minima voluptates eos doloribus illum
ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
molestiae ipsa nulla! Est aspernatur eius corrupti.
</p>
</div>
<div className="section" id="products">
<h2>Products</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
Nisi officia, placeat, enim quibusdam nostrum similique atque
accusantium natus sit molestias minima voluptates eos doloribus illum
ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
molestiae ipsa nulla! Est aspernatur eius corrupti.
</p>
</div>
<div className="section" id="services">
<h2>Services</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
Nisi officia, placeat, enim quibusdam nostrum similique atque
accusantium natus sit molestias minima voluptates eos doloribus illum
ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
molestiae ipsa nulla! Est aspernatur eius corrupti.
</p>
</div>
<div className="section" id="about-us">
<h2>About Us</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, unde!
Nisi officia, placeat, enim quibusdam nostrum similique atque
accusantium natus sit molestias minima voluptates eos doloribus illum
ullam, pariatur fugiat? Minima minus aspernatur, quos, explicabo sed
asperiores, enim officia qui voluptates magnam vero aliquid corrupti?
Aliquid, est! Expedita tempore impedit fuga eligendi veritatis
molestiae ipsa nulla! Est aspernatur eius corrupti.
</p>
</div>
</div>
)
}
export default App
Как вы можете видеть в коде, у нас есть заголовок со ссылками на 4 различных раздела. Мы задали id каждого раздела в качестве значения атрибута href (например: <a href="#products">Products</a>). Мы также добавили высоту 100vh к разделам, чтобы они занимали всю высоту экрана и прокрутка была видна правильно.
Теперь, если вы запустите приложение и нажмете на один из пунктов меню, вы увидите, что вы прокручиваетесь в этот раздел. Однако вы заметите, что при нажатии на меню оно просто переходит в этот раздел. Возможно, вы захотите, чтобы пользователь получил более приятные ощущения, например, плавную прокрутку. Это можно сделать, добавив следующий CSS:
html {
scroll-behavior: smooth;
}
Теперь, если вы запустите приложение, вы сможете увидеть плавную прокрутку. Вы также можете протестировать приложение здесь.
Плавная прокрутка пока не поддерживается в Safari. Подробности о поддержке браузера вы можете узнать здесь.
Прокрутка с помощью хука useRef
Если вы не хотите указывать идентификаторы и хотите использовать ссылку, вы можете сделать это с помощью следующего кода:
import React, { useRef } from "react"
const App = () => {
const paraRef = useRef(null)
const clickHandler = () => {
paraRef.current &&
paraRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
}
return (
<div>
<button onClick={clickHandler}>Scroll to Next para</button>
<p className="section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
repudiandae ut tempore laudantium, provident labore doloremque sit
magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
earum asperiores ut, hic voluptates libero sed consequuntur facere
itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
nam eum minima quasi temporibus. Non?
</p>
<p className="section" ref={paraRef}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
repudiandae ut tempore laudantium, provident labore doloremque sit
magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
earum asperiores ut, hic voluptates libero sed consequuntur facere
itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
nam eum minima quasi temporibus. Non?
</p>
<p className="section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde eum
repudiandae ut tempore laudantium, provident labore doloremque sit
magnam, minima temporibus explicabo voluptatibus cupiditate a culpa
reprehenderit magni, qui aspernatur! Laborum a iure doloribus, officia
earum asperiores ut, hic voluptates libero sed consequuntur facere
itaque natus quisquam! Numquam explicabo sint saepe porro, qui quibusdam
nam eum minima quasi temporibus. Non?
</p>
</div>
)
}
export default App
Здесь мы использовали хук useRef для создания ссылки на раздел, к которому мы хотим прокрутить страницу. При нажатии на кнопку мы вызываем метод scrollIntoView этой ссылки.
В параметре block можно указать ‘end’ для прокрутки в конец раздела и ‘center’ для прокрутки в центр раздела.
Рабочую демонстрацию можно посмотреть здесь.