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