유튜브 영상 관련 질문 드립니다.
본문
안녕하세요 현제 사이트를 하나 만들었는데요 문제는
이게 풀페이지로 만들어져 있는데요 풀페이지 상태에서 마우스로 휠을 아래로 화면 다음 section으로 넘어 가야 하는데 안되서요 혹시 이건 어떻게 처리 하면 되는 알려 주시면 감사 드리겠습니다.
다른 빈공간에서는 스크롤이 작동은 하구요
답변 4
fullpage.js로 제작하셨다면
예외처리 옵션이 있었던거 같은데..
new fullpage('#fullpage', { normalScrollElements: '#yt-video', });
이런식으로 해당 요소 집어넣어주면 됐던거 같아요
아 안되네요 에고....ㅠㅠㅠㅠㅠ
버전마다 다를수있으니 사용하신 풀페이지 버전에 맞춰서 구글링 한번 해보시는게..
일단 수작업한거 다 백업하시고 원본 예제로 채크해보세요.
보통 작업한 부분에서 에러가 나서 다음 진행이 안되는게 대다수 입니다.
아래 내용은 마우스 휠을 아래로 스크롤할 때 다음 섹션으로 내려가는 자바스크립트 입니다.
참고하시고 해당 사이트에 적용해보시기 바랍니다.
<!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>
유튜브 위에 투명 레이어를 덮어서
유튜브의 마우스 기능이 안되게 하는 방법도 있습니다.
답변을 작성하시기 전에 로그인 해주세요.