React JS에서 섹션을 스크롤할 때 Nav-Link를 강조 표시합니다.

최근에 나는 내 시리즈에서 Nav-link's to active as you scroll에 대해 게시했습니다.

10 Lines of JavaScript에서 섹션을 스크롤할 때 탐색 링크가 활성화됩니다.

Areeb ur Rub ・ 6월 8일 ・ 2분 읽기

#javascript #showdev #coding #webdev

이제 React 웹 사이트에서 동일한 작업을 수행하는 방법을 알려 드리겠습니다.

이를 위해서는 일반적으로 react-scrollspy-highlight라는 이름의 패키지를 설치해야 하므로 먼저 이 패키지를 설치해야 합니다.

패키지 설치

npm i react-scrollspy

프로젝트에서 사용하면

먼저 다음과 같이 라이브러리를 가져옵니다.
import Scrollspy from 'react-scrollspy'
그런 다음 페이지의 각 섹션에 다른 ID를 지정하고 탐색 링크에 연결하십시오.

그런 다음 다음과 같이 라이브러리를 사용하십시오.

  <Scrollspy
        items={ ['section-1', 'section-2', 'section-3'] }
        currentClassName="active" >

    <li><a href="#section-1">section 1</a></li>
    <li><a href="#section-2">section 2</a></li>
    <li><a href="#section-3">section 3</a></li>

  </Scrollspy>

소품 항목에 배열 형태로 섹션의 ID를 언급하십시오.

이를 추가한 후 className 활성에 대한 스타일을 생성하면 currentClassName 아래의 클래스가 섹션의 스크롤 도달 범위로 섹션의 classList에 추가됩니다.

in case you don't know : Those { [...] } curly brackets around the array in prop item is just a way to mention javascript in JSX, this not mean items store an object.

부드러운 스크롤을 위한 또 하나의 팁,

어떤 사람들은 부드러운 스크롤에 문제가 있고 이를 위해 다른 라이브러리를 사용하지만 부드러운 스크롤을 가능하게 하는 간단한 css 속성이 있습니다scroll-behavior:smooth; 이것을 본문 또는 html에 추가하면 페이지의 스크롤이 부드럽게 됩니다.

html,body {
  user-select:none;
}

자세한 내용: 방문react-scrollspy-highlight

또한 읽기:

10줄 미만의 자바스크립트에서 아래로 스크롤하여 NavBar 숨기기

Areeb ur Rub ・ 5월 24일 ・ 1분 읽기

#javascript #tutorial #webdev #css

더 많은 것을 위해 따르십시오:

Areeb ur RubFollow

18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things