어제 저녁에 일부 문서 페이지에서 작업하고있었습니다. 

페이지 레이아웃은 왼쪽의 콘텐츠 창과 오른쪽의 사이드 바 탐색으로 구성되어있어 매우 클래식합니다. 

페이지를 덜 둔하게 만드는 방법을 찾기 위해 몇 가지 작은 것을 추가하기로 결정했습니다.

https://www.bram.us/2020/01/10/smooth-scrolling-sticky-scrollspy-navigation/ 

1. 내부 링크를 클릭 할 때 부드러운 스크롤
2. 사이드 바 탐색이 항상 표시되도록 하는 고정 탐색
3. 탐색의 활성 상태를 업데이트 하는 “ScrollSpy”

이 3 가지 추가 기능은 페이지를 더욱 즐겁게 만들어줍니다. 

무엇보다 구현이 매우 쉽습니다. 이 포스트에서는 세부 사항을 설명하겠습니다.

결과 

먼저, 다음은 내가 말하는 것에 대한 아이디어를 얻을 수 있도록 최종 결과를 기록한 것입니다.

마크 업 

마크 업은 정말 기본입니다 :

• 주요 요소는 콘텐츠 div와 탐색을 둘러 쌉니다.
• 각 컨텐츠는 id 속성을 가져 오는 섹션으로 래핑됩니다. 사이드 바 탐색 메뉴에서 ID로 연결

<main>
	<div>
		<h1>Smooth Scrolling Sticky ScrollSpy Navigation</h1>
		<section id="introduction">
			<h2>Introduction</h2>
			<p>…</p>
		</section>
		<section id="request-response">
			<h2>Request &amp; Response</h2>
			<p>…</p>
		</section>
		<section id="authentication">
			<h2>Authentication</h2>
			<p>…</p>
		</section>
		…
		<section id="filters">
			<h2>Filters</h2>
			<p>…</p>
		</section>
	</div>
	<nav class="section-nav">
		<ol>
			<li><a href="#introduction">Introduction</a></li>
			<li><a href="#request-response">Request &amp; Response</a></li>
			<li><a href="#authentication">Authentication</a></li>
		…
			<li class=""><a href="#filters">Filters</a></li>
		</ol>
	</nav>
</main>

CSS 그리드를 사용하여 CSS 그리드를 사용하여 모든 것을 배치하십시오. 완전히 작동하지만 페이지가 둔합니다.

https://codepen.io/bramus/pen/bGNMbPz

1. 부드러운 스크롤 

부드러운 스크롤을 활성화하는 것은 정말 쉽습니다. 한 줄의 CSS를 사용하여 활성화 할 수 있습니다.

html {
	scroll-behavior: smooth;
}

? 예, 그뿐입니다!

아래에 포함 된 데모에서 탐색 메뉴의 링크를 클릭하고 얼마나 부드럽게 스크롤 되는지 확인하십시오.

https://codepen.io/bramus/pen/NWPMWKJ

이를 지원하지 않는 브라우저의 경우 다음 JS 폴백을 추가 할 수 있습니다.

// Smooth scrolling for browsers that don't support CSS smooth scrolling
if (window.getComputedStyle(document.documentElement).scrollBehavior !== 'smooth') {
    document.querySelectorAll('a[href^="#"]').forEach(internalLink => {
        const targetElement = document.querySelector(internalLink.getAttribute('href'));
        if (targetElement) {
            internalLink.addEventListener('click', (e) => {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                });
                e.preventDefault();
            });
        }
    });
}

그러나 스크롤 동작을 지원하지 않는 브라우저는 매끄럽습니다. 또한 Element # scrollIntoView에 대해 "부드러운"동작을 지원하지 않으므로 이 JS 폴백을 추가 할 때 실질적인 이점이 없습니다.

2. Sticky Navigation 

스크롤 할 때 내비게이션을 유지하려면 위치에 의존 할 수 있습니다 : sticky ;. 부드러운 스크롤과 마찬가지로 이것은 정말 간단한 CSS 추가 사항입니다.

main > nav {
	position: sticky;
	top: 2rem;
	align-self: start;
}

자기 정렬 추가 : 시작; 내비게이션 요소가 주변의 메인 요소만큼 높을 수 있기 때문에 여기서 중요한 요소입니다. 이 경우에는 탐색 기능을 사용할 수 없습니다.

아래의 데모에서 탐색 메뉴의 링크를 클릭하고 나머지 페이지가 스크롤 되는 동안 탐색 메뉴가 어떻게 표시되는지 확인하십시오.

https://codepen.io/bramus/pen/mdyLdPj

3. IntersectionObserver를 사용하여 ScrollSpy 

전능한 IntersectionObserver 덕분에 ScrollSpy를 구현할 수 있습니다. 기본적으로 우리는 모든 section [ "id"] 요소를 감시하는데 사용합니다. 이들이 교차하는 경우 .active 클래스를 해당 링크에 연결합니다. 스타일링을 위해 링크 자체에 .active를 추가하지 않고 주변 요소에 .active를 추가합니다.

코드에서 이것은 다음과 같은 작은 스니펫이 됩니다.

window.addEventListener('DOMContentLoaded', () => {

	const observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			const id = entry.target.getAttribute('id');
			if (entry.intersectionRatio > 0) {
				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
			} else {
				document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
			}
		});
	});

	// Track all sections that have an `id` applied
	document.querySelectorAll('section[id]').forEach((section) => {
		observer.observe(section);
	});
	
});

?.active와의 전환을 너무 갑작스럽게 하지 않으려면 CSS를 약간 추가하여 작업을 수월하게 하십시오.

.section-nav a {
    transition: all 100ms ease-in-out;
}

완전한 데모 

모든 것을 종합하면 다음과 같이 끝납니다.

https://codepen.io/bramus/pen/ExaEqMJ