안녕하세요 현제 사이트를 하나 만들었는데요 문제는
이게 풀페이지로 만들어져 있는데요 풀페이지 상태에서 마우스로 휠을 아래로 화면 다음 section으로 넘어 가야 하는데 안되서요 혹시 이건 어떻게 처리 하면 되는 알려 주시면 감사 드리겠습니다.
다른 빈공간에서는 스크롤이 작동은 하구요
답변 4개 / 댓글 2개
채택된 답변
+20 포인트
fullpage.js로 제작하셨다면
예외처리 옵션이 있었던거 같은데..
Copy
new fullpage('#fullpage', { normalScrollElements: '#yt-video', });이런식으로 해당 요소 집어넣어주면 됐던거 같아요
아래 내용은 마우스 휠을 아래로 스크롤할 때 다음 섹션으로 내려가는 자바스크립트 입니다.
참고하시고 해당 사이트에 적용해보시기 바랍니다.
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Sections</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.section:nth-child(odd) {
background-color: #f0f0f0;
}
.section:nth-child(even) {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
<script>
const sections = document.querySelectorAll('.section');
let currentSectionIndex = 0;
function scrollToNextSection(event) {
if (event.deltaY > 0) { // Scroll down
if (currentSectionIndex < sections.length - 1) {
currentSectionIndex++;
sections[currentSectionIndex].scrollIntoView({ behavior: 'smooth' });
}
}
}
window.addEventListener('wheel', scrollToNextSection);
</script>
</body>
</html>답변을 작성하려면 로그인이 필요합니다.