자바스크립트 스크롤 멈춤 이벤트

좌우로 스크롤되는 리스트가 있다.

리스트에는 각각의 아이템들이 있으며 스크롤 할때 멈춘위치에서 가까운 아이템에 딱 맞춰서 이동하는 코드가 필요해서 만들어봤다.

코드는 아래와 같고 설명은 밑에 적어두겠다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

var scroll_left; // 좌우 스크롤 값 var item_width; // 아이템 width var current_left; // 현재 스크롤 var current; // 현재위치 var isScrolling = false; // 스크롤중인지 체크   // 리스트 좌우 스크롤 이벤트 $(".스크롤 element").scroll(function() {     scroll_left = $(".스크롤 element").scrollLeft();      item_width = $(".스크롤 안의 아이템").width() + 8;      current_left = scroll_left % item_width;      current = parseInt(scroll_left / item_width);     isScrolling = true; }); // 스크롤이 멈췄을 때 $.fn.scrollStopped = function(callback) {     var that = this, $this = $(that);     $this.scroll(function(ev) {         clearTimeout($this.data('scrollTimeout'));         $this.data('scrollTimeout', setTimeout(callback.bind(that), 100, ev));     }); }; // 스크롤 엔드 이벤트 $(".스크롤 element").scrollStopped(function(ev){     if(current_left > (item_width * 0.4)) { // 일정 범위 이상 넘어가면          $(".스크롤 elementt").animate({scrollLeft:(current+1)*item_width}, 500); // 부드럽게 이동          //$(".map_store_list").scrollLeft((current+1)*item_width); // 다음페이지     }     else { // 아니면          $(".스크롤 element").animate({scrollLeft:current*item_width}, 500);         //$(".map_store_list").scrollLeft(current*item_width); // 현재페이지     } }); Colored by Color Scripter

cs

 

8번줄) .스크롤 element라고 적힌곳에 스크롤이되는 div같은 element의 클래스나 id명을 적어준다.

window라면 그냥 $(window)로 수정하도록.

scroll(function() 은 리스트가 스크롤 될 때 발생하는 이벤트이다.

.스크롤 안의 아이템은 스크롤 내에 존재하는 아이템 element이다.

+8은 패딩값때문에 줬다.

current_left는 스크롤바가 길기 때문에 현재 스크롤 위치를 구하기 위해 item의 width만큼 나눈 나머지값이 된다.

current는 나머지값이 아니라 나눈값인데,

아이템이 넘어갈때마다 1씩 증가하는 셈이된다. (나중에 인덱스로 활용하기 위해 사용했다.)

 

16번줄) 스크롤이 멈췄을때 콜백함수인데 이건 구글링해서 찾은것이다. 그대로 복사하면 된다.

 

20번줄) 100이라는 값은 스크롤이 멈추고난 후 시간을 잰것이다 100이면 0.1초

 

24번줄) 이제 콜백함수를 호출하면 스크롤이 멈췄을때 발생하게 된다.

25번줄) 0.4라는 수치는 해당 아이템의 길이를 일정수치이상 넘어갔을때 작동하도록 만들었다.

이는 자신이 직접 실행해보고 맞춰서 바꾸면 된다.

 

26번줄) animate는 스크롤이 이동되는것을 애니메이션처럼 보여주기위함이다.

좌우 스크롤이 아닌 상하 스크롤이라면 scrollLeft를 scrollTop으로 바꿔주자.

current+1은 다음 아이템으로 넘어가는것이며 current는 현재 아이템으로 돌아가는 뜻이다.

500의 값은 변경되는 속도인데 이게 크면 클수록 느려진다. 0.5초만에 돌아간다는 뜻이다.

 

질문이나 오류사항은 댓글로 남겨주길.