div 수평 스크롤 제어 scrollLeft
페이지 정보
본문
.content-wrapper{overflow-x:auto; white-space:nowrap;}
// 처음 버튼 클릭 시
$('#btn_first').click(function() {
$('.content-wrapper').animate({scrollLeft: 0}, 500);
});
// 왼쪽 버튼 클릭 시
$('#btn_left').click(function() {
$('.content-wrapper').animate({scrollLeft: '-=500'}, 500); // 왼쪽으로 500px 이동
});
// 오른쪽 버튼 클릭 시
$('#btn_right').click(function() {
$('.content-wrapper').animate({scrollLeft: '+=500'}, 500); // 오른쪽으로 500px 이동
});
// 마지막 버튼 클릭 시
$('#btn_last').click(function() {
var scrollLeft_last = $('.content-wrapper').width();
$('.content-wrapper').animate({scrollLeft: scrollLeft_last}, 500);
});
추천
0
비추천
0
- 이전글 querySelector 문법 (CSS 선택자) 26.01.29
- 다음글 크롬 브라우저에서 keyup 이벤트가 작동하지 않을때 26.01.28
