자동스크롤 제이쿼리 채택완료
갭갭
7년 전
조회 4,426
현재 사용하고 있는 HTML구성이
</p>
<p><section id="row1"></p>
<p> <div>메인비쥬얼</div></p>
<p></section></p>
<p><section id="row2"></p>
<p> <div>두번째 구역</div></p>
<p></section></p>
<p><section id="row3"></p>
<p> <div>세번째 구역</div></p>
<p></section></p>
<p>
이렇게 있습니다.
일단 메인비쥬얼인 row1은
</p>
<p>function funLoad(){
var Cheight = $(window).height();
$('#row1').css({'height':Cheight+'px'});
}
window.onload = funLoad;
window.onresize = funLoad;</p>
<p>
이렇게 해서 자동으로 모니터의 높이에 따라서 꽉차게 해놨습니다.
하지만 row1 아래부터는 높이가 꽉차지않고 그냥 일반 영역입니다.
제가 원하는것은 http://www.namsantasteofkorea.com/ 이 사이트처럼 스크롤을 한번했을때 다음 영역으로 자동스크롤이 되는것입니다.
하지만 모든 영역이 아니라 row1에서 row2로 넘어갈때와 row2에서 row1로 넘어갈때만 자동스크롤이 되고 그 상황이 아닐때는 그냥 일반 스크롤이 됐으면좋겠어요..
아무리 구글링을 해봐도 모든 영역이 높이가 꽉차는 경우에 자동스크롤하는 코드밖에 없네요...
어떻게 해야할까요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
7년 전
</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>
테스트는 안해봤습니다
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
갭갭
7년 전
근데 마우스를 살짝 드륵 하면 잘되는데 드르르륵 한번에 확 내리려고 하면 버벅거리네요 ㅠㅠㅠ 그리고 row2에서 위로 올라갈때 살짝 몇 픽셀올라가고 스크롤되는데 이건 왜때문이죠?ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인