유튜브 영상 관련 질문 드립니다.

유튜브 영상 관련 질문 드립니다.

QA

유튜브 영상 관련 질문 드립니다.

본문

안녕하세요 현제 사이트를 하나 만들었는데요 문제는

이게 풀페이지로 만들어져 있는데요 풀페이지 상태에서 마우스로 휠을 아래로 화면 다음 section으로 넘어 가야 하는데 안되서요 혹시 이건 어떻게 처리 하면 되는 알려 주시면 감사 드리겠습니다.

다른 빈공간에서는 스크롤이 작동은 하구요

https://sion.homweb.co.kr/

이 질문에 댓글 쓰기 :

답변 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 138
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT