제이쿼리 한 화면 단위 이동 scroll script

제이쿼리 한 화면 단위 이동 scroll script

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>

html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#fff; font-size:30pt;}
.box:nth-child(1) {background:red}
.box:nth-child(2) {background:yellow}
.box:nth-child(3) {background:pink}
.box:nth-child(4) {background:coral}
.box:nth-child(5) {background:gray}
.box:nth-child(6) {background:skyblue}
.box:nth-child(7) {background:purple}

 

$(".box").each(function () {
                // 개별적으로 Wheel 이벤트 적용 mousewheel(IE/chrome/opera) DOMMouseScroll(FF)
                $(this).on("mousewheel DOMMouseScroll", function (e) {
                    e.preventDefault();
                    var delta = 0;
                    /* IE */
                    if (!event) event = window.event;
                    //휠에 대한 정보 얻기 파이어폭스 외 IE/Chrome/Opera = wheelDelta
                    if (event.wheelDelta) {
                        delta = event.wheelDelta / 50;
                        //평균 50~120 사이로 요소의 인식높이에 따라 다름(한 화면(height100%)기준일떄는 120
                        if (window.opera) delta = -delta;
                    //휠에 대한 정보 얻기 Mozilla FF = detail
                    } else if (event.detail) delta = -event.detail / 3;
                    var moveTop = null;
                    // 마우스휠을 위에서 아래로
                    if (delta < 0) {
                        if ($(this).next() != undefined) {
                            moveTop = $(this).next().offset().top;
                        }
                    // 마우스휠을 아래에서 위로
                    } else {
                        if ($(this).prev() != undefined) {
                            moveTop = $(this).prev().offset().top;
                        }
                    }
                    // 화면 이동 0.8초(800)
                    $("html,body").stop().animate({
                        scrollTop: moveTop + 'px'
                    }, {
                        duration: 300, complete: function () {
                        }
                    });
                });
            });

one_scroll.js

0.00MB