자동스크롤 제이쿼리 채택완료
현재 사용하고 있는 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 포인트
bonobono7년 전
</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에서 위로 올라갈때 살짝 몇 픽셀올라가고 스크롤되는데 이건 왜때문이죠?ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
답변대기
채택
답변대기
답변대기