TEAM Project (11.04) - 메인 프론트 작업 (스크롤 시 섹션 하나씩 이동)

스크롤 시 섹션 하나씩 이동
https://chpofo.tistory.com/44

 

---

 

<script>
        $(document).ready(function () {
            console.log("jQuery is loaded and ready!");

            $(window).on("wheel", function (e) {
                e.preventDefault(); 

                if ($html.is(":animated")) return;

                if (e.originalEvent.deltaY > 0) {
                    if (page === lastPage) return;
                    page++;
                } else if (e.originalEvent.deltaY < 0) {
                    if (page === 1) return;
                    page--;
                }

                var posTop = (page - 1) * $(window).height();
                $html.animate({ scrollTop: posTop });
            });
        });
    </script>

스크롤 시 섹션 하나씩 이동하기 위해서 블로그를 참고해서 코드를 적용한 결과 오류..

Unable to preventDefault inside passive event listener due to target being treated as passive
-> wheel 이벤트에서 preventDefault()를 호출했지만, 브라우저가 기본적으로 passive: true로 설정된 경우 발생하는 오류 /
문제를 해결하려면 wheel를 passive: false로 설정하는 방법이 필요

Uncaught ReferenceError: $html is not defined
-> $html 변수가 정의되지 않았다는 것을 의미

  <script>
        $(document).ready(function () {
            var $html = $("html");

            var page = 1;
            var lastPage = $(".content").length;

            // 초기 스크롤 위치 설정
            $html.animate({ scrollTop: 0 }, 10);

            // wheel 이벤트를 passive: false로 설정하여 preventDefault를 사용
            $(window).on("wheel", { passive: false }, function (e) {
                e.preventDefault();

                if ($html.is(":animated")) return;

                if (e.originalEvent.deltaY > 0) {
                    if (page === lastPage) return;
                    page++;
                } else if (e.originalEvent.deltaY < 0) {
                    if (page === 1) return;
                    page--;
                }

                var posTop = (page - 1) * $(window).height();
                $html.animate({ scrollTop: posTop });
            });
        });

    </script>

위와 같이 작성했더니

이런게 뜨는데.. 뭐지

 

일단 스크롤 한번 할때마다 섹션 하나씩 이동은 되는데.. 내일.. 고치자 (지금 새벽.. 1시 50분.. )