테스트 사이트 - 개발 중인 베타 버전입니다

자동스크롤 코드 버그 채택완료

갭갭 7년 전 조회 4,414

</p>

<p>$(window).on( 'DOMMouseScroll mousewheel', function ( event ) {

    var win_top = $(window).scrollTop();

    var row1_top = $('#row1').offset().top;

    var row2_top = $('#row2').offset().top;

    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) {

        if(win_top == row1_top ){

            $('html,body').animate({scrollTop:row2_top},300);

        }

    } else {

        if(win_top < row2_top ){

            $('html,body').animate({scrollTop:row1_top},300);

        }

    }

    });</p>

<p>

 

↑첫번째 #row1에서 #row2로 넘어갈때 자동으로 스크롤 되고,

#row2에서 #row1에서 넘어갈때도 자동으로 스크롤되게 사용한 제이쿼리 소스는 이겁니다.

 

</p>

<p>    $(".scroll_icon").on("click", function(){

        var scmove = $('#row2').offset().top;

        $('html, body').animate( { scrollTop : scmove }, 500 );

    });</p>

<p>

 

↑이것은 메인비쥬얼에있는 마우스모양 아이콘을 클릭하면 자동으로 #row2로 넘어갈때 사용한 제이쿼리 소스입니다.

 

</p>

<p>    $(window).scroll( function(){

        $('#row2 #wrap .content .cts1 .circle,#row2 #wrap .content .cts2,#row2 #wrap .content .cts3,#row2 #wrap .content .cts4').each( function(i){

            var bottom_of_element = $(this).offset().top + $(this).outerHeight();

            var bottom_of_window = $(window).scrollTop() + $(window).height();

            if( bottom_of_window > bottom_of_element ){

                $(this).addClass('on');

            }

        }); 

    });</p>

<p>

 

↑이것은 #row2에 있는 콘텐츠가 반쯤 보이면 on이라는 클래스를 붙히라는 제이쿼리 소스입니다.

 

------------------

 

이 모든 소스가 같은 js파일에있구요.

 

이 코드를 보여드린 이유는

 

#row1에서 #row2로 넘어갈때 버벅거리는 현상이 발생해서 왜 그러는것인지 여쭤보려고합니다.

 

스크롤 관련된 제이쿼리는 이것들이 다입니다.

 

혹시라도 겹치는게 있어서 그런건지 여쭤봅니다.

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

그누보드 제이쿼리민과 겹칠수있습니다 스크립트를 변형하셔야되요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인