섹션 기반 스크롤 / 원페이스 스크롤 / 풀페이지 스크롤 이라는 이름으로 섹션 단위로 부드럽게 스크롤 하는 기능에 대한 라이브러리가 굉장히 많은데 수정하기도 힘들고 그냥 내가 만드는게 더 나을 것 같아서 만들면서 공부해보자.
취미삼아 공부하는것이기때문에 코드가 잘못된 부분이 있을 수 있다.
(오류 확인되면 알려주세요. 😂)
가장 중요한 조건: 모바일, 데스크탑 모두 동일하게 보여줘야한다.
html 파일 만들기
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>섹션 스크롤</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <section data-index="1"> <h1>Section 1</h1> </section> <section data-index="2"> <h1>Section 2</h1> </section> <section data-index="3"> <h1>Section 3</h1> </section> <section data-index="4"> <h1>Section 4</h1> </section> <section data-index="5"> <h1>Section 5</h1> </section> <section data-index="6"> <h1>Section 6</h1> </section> <section data-index="7"> <h1>Section 7</h1> </section> <section data-index="8"> <h1>Section 8</h1> </section> <section data-index="9"> <h1>Section 9</h1> </section> <section data-index="10"> <h1>Section 10</h1> </section> </main> <script src="script.js"></script> </body> </html>
CSS 파일 만들기
@charset "utf-8";
/* CSS Document */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
width: 100%;
height: 100%;
font-size: 16px;
}
.container {
width: 100%;
height: 100%; /* Ensure the container fills the entire viewport height */
overflow: hidden; /* Hide scrollbars */
scroll-behavior: smooth; /* Enable smooth scrolling */
}
section {
width: 100%;
height: 100vh; /* Each section will take the full viewport height */
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-weight: bold;
color: #000000;
}
section:nth-of-type(even) {
background-color: #CCCCCC;
}
Javascript 파일 만들기
// JavaScript 문서
document.addEventListener('DOMContentLoaded', function () {
var sections = document.querySelectorAll('section');
var currentSectionIndex = 0;
var scrolling = false;
var startY = 0;
function scrollToSection(index) {
if (index >= 0 && index < sections.length) {
sections[index].scrollIntoView({ behavior: 'smooth' });
currentSectionIndex = index;
}
}
function handleScroll(event) {
event.preventDefault();
if (scrolling) return;
scrolling = true;
var deltaY = event.deltaY || event.wheelDeltaY || -event.detail;
if (deltaY > 0) {
scrollToSection(currentSectionIndex + 1);
} else if (deltaY < 0) {
scrollToSection(currentSectionIndex - 1);
}
setTimeout(function () { scrolling = false; }, 1000);
}
function handleTouchStart(event) {
startY = event.touches[0].clientY;
}
function handleTouchMove(event) {
var deltaY = event.touches[0].clientY - startY;
if (deltaY > 100) {
scrollToSection(currentSectionIndex - 1);
startY = event.touches[0].clientY;
} else if (deltaY < -100) {
scrollToSection(currentSectionIndex + 1);
startY = event.touches[0].clientY;
}
}
window.addEventListener('wheel', handleScroll, { passive: false });
window.addEventListener('touchstart', handleTouchStart, { passive: false });
window.addEventListener('touchmove', handleTouchMove, { passive: false });
});
공부 목적 블로그