본문 바로가기
javascript/jQuery

[ScollLeft()] 모바일 메뉴 좌우스크롤에서 선택된 메뉴 쪽으로 스크롤 되도록 하기

by 알찬 퍼블리셔 2022. 9. 13.
728x90
반응형

 

$('.tabmenu ul li a').on('click', function(){
//메뉴 중에 하나를 클릭하면
  $('.tabmenu ul li').removeClass('on'); // 전체 on 삭제
  $(this).parent().addClass('on'); // 선택된 부모 li에게 on 부여
  
  var left = $('.tabmenu ul li.on').offset().left;
  //on이 부여된 li 의 위치 (스크롤된 상태 기준으로 계산됨)
  var curLeft = $('.tabmenu').scrollLeft();
  //현재 스크롤 위치
  
  $('.tabmenu').animate({scrollLeft : curLeft+left}, 400);
  //400ms 동안 scrollLeft의 위치를 (curLeft + left) 로 변경함 
});

 

 

 

 

 

 

 

728x90
반응형

댓글