div  수평 스크롤 제어 scrollLeft

div 수평 스크롤 제어 scrollLeft

소스예제
.content-wrapper{width:900px; margin:3px auto; padding:5px; border: 1px solid #ccc; overflow-x:auto; white-space:nowrap;} .content-wrapper::-webkit-scrollbar { width: 20px; } .content-wrapper::-webkit-scrollbar-track { background-color: gray; } .content-wrapper::-webkit-scrollbar-thumb { background-color: skyblue; } .content-wrapper::-webkit-scrollbar-button { display: none; } .content-wrapper textarea{ width:1900px;height:300px;} .btn_scroll_box{width: 300px; margin:3px auto; padding:5px;} 처음 왼쪽 오른쪽 마지막

Tag And Script

<style>
.content-wrapper{width:900px; margin:3px auto; padding:5px; border: 1px solid #ccc; overflow-x:auto; white-space:nowrap;}
.content-wrapper::-webkit-scrollbar { width: 20px; }
.content-wrapper::-webkit-scrollbar-track { background-color: gray; }
.content-wrapper::-webkit-scrollbar-thumb { background-color: skyblue; }
.content-wrapper::-webkit-scrollbar-button { display: none; }
.content-wrapper textarea{ width:1900px;height:300px;}
.btn_scroll_box{width: 300px; margin:3px auto; padding:5px;}
</style>

<div class="content-wrapper">
	<textarea class="frm_input frm_textarea">
.content-wrapper{width:900px; margin:3px auto; padding:5px; border: 1px solid #ccc; overflow-x:auto; white-space:nowrap;}
.content-wrapper::-webkit-scrollbar { width: 20px; }
.content-wrapper::-webkit-scrollbar-track { background-color: gray; }
.content-wrapper::-webkit-scrollbar-thumb { background-color: skyblue; }
.content-wrapper::-webkit-scrollbar-button { display: none; }

.content-wrapper textarea{ width:1900px;height:300px;}
.btn_scroll_box{width: 300px; margin:3px auto; padding:5px;}
	</textarea>
</div>
<div class="btn_scroll_box">
	<button type="button" class="btn btn_scroll_first">처음</button>
	<button type="button" class="btn btn_scroll_left">왼쪽</button>
	<button type="button" class="btn btn_scroll_right">오른쪽</button>
	<button type="button" class="btn btn_scroll_last">마지막</button>
</div>

<script>
$(function(e){
	// 처음 버튼 클릭 시
	$('.btn_scroll_first').click(function() {
		$('.content-wrapper').animate({scrollLeft: 0}, 500);
	});
	 
	// 왼쪽 버튼 클릭 시
	$('.btn_scroll_left').click(function() {
		$('.content-wrapper').animate({scrollLeft: '-=100'}, 500); // 왼쪽으로 500px 이동
	});
	 
	// 오른쪽 버튼 클릭 시
	$('.btn_scroll_right').click(function() {
		$('.content-wrapper').animate({scrollLeft: '+=100'}, 500); // 오른쪽으로 500px 이동
	});
	 
	// 마지막 버튼 클릭 시
	$('.btn_scroll_last').click(function() {
		var scrollLeft_last = $('.content-wrapper textarea').width();
		$('.content-wrapper').animate({scrollLeft: scrollLeft_last}, 500);
	});
});
</script>