[JQUERY] 스크롤 모션 - 가로스크롤 처음과 끝을 감지하기

웹, 모바일에서 사용 가능하다.
스크롤 처음과 끝을 감지해 모션을 만들게 되는 경우가 있어 정리하게 되었다.

jquery로 처음과 끝만 감지되는지 확인 할 수 있게 만들었다. (참고로 가로스크롤이다.)

 

1. html

<div class="wrap">
  <div class="scrollwrap">
    <div class="scrollcontent">
      스크롤 박스
    </div>
  </div>
  <p class="scrolllo">스크롤 위치</p>
</div>

 

2. css

.scrollwrap { position: relative; display: block; width:200px; overflow-x: auto;}
.scrollcontent { width: 1000px; }

3. jquery

  function showGradient(){
    if($(this).scrollLeft() == 0){// 스크롤이 0일 때
		$('.scrolllo').text('스크롤 처음입니다.');
    }else if (Math.ceil($(this).scrollLeft() + $(this).width()) == $('.scrollcontent').width()) {//스크롤이 끝에 왔을 때
		$('.scrolllo').text('스크롤 끝입니다.');
    }else{
      $('.scrolllo').text('스크롤 중간입니다.');
    }
  }
  
  $(function(){
  	showGradient();
    $('.scrollwrap').on('scroll',showGradient);
  });

원하는 모션이나 기능을 넣어야 할 경우, $('.scrolllo').text(); 을 지우고 추가하면 된다.

 

4. 결과