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