특정 레이아웃 안에서 스크롤이 생길 시 마우스 스크롤을 일일이 클릭 후 이동하여 화면을 봐야하는 불편함이 있는데 마우스 이벤트를 이용하여 클릭 후 스크롤을 자동으로 이동 시킬 수 있는 방법이 있다. 

검색을 해보면 마우스 스크롤 이벤트는 상당히 많이 존재하는데 이를 이용하여 직접 만들 수 도 있지만 우리는 항상 시간이 부족하기때문에 시간이 조금 난김에 아래와 같이 JQUERY 라이브러리로 만들어 보았다. 

<!-- jquery 라이브러리 로드 -->
<script src="//code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- 스크롤 이벤트가 발생되는 레이아웃 CSS -->
<style>
	.scroll-move{ width:300px; height:300px; overflow: scroll; margin:0 auto; }
</style>

<!-- 스크롤 이벤트가 발생되는 HTML 소스 -->
<div class="scroll-move">
	<img src="이미지소스" />
</div>

<script>
/* 라이브러리 정의 */
$.fn.scrollMove = function () {
	var controlDown = false;
	var pointer = {
		pageY : 0,
		pageX : 0,
		scrollTop : 0,
		scrollLeft : 0,
	};
	// 마우스 이벤트
	$(this).css('cursor','all-scroll');
	$(this).on('mousedown',function(e){
		e.preventDefault();
		controlDown = true;
		pointer.pageX = e.pageX;
		pointer.pageY = e.pageY;
		pointer.scrollTop = $(this).scrollTop();
		pointer.scrollLeft = $(this).scrollLeft();
	});
	$(this).on('mousemove',function(e){
		if(controlDown){
			var newPageX = e.pageX;
			var newPageY = e.pageY;
			$(this).scrollLeft(pointer.scrollLeft - newPageX + pointer.pageX);
			$(this).scrollTop(pointer.scrollTop - newPageY + pointer.pageY);
		}
	});
	$(this).on('mouseup',function(e){controlDown = false;});    
};	

// 스크롤 이벤트 실행
$('.scroll-move').scrollMove();
</script>

실행해보면 알겠지만 이벤트는 scroll-move 에 발생되고 마우스 이벤트에 의해 마우스를 클릭 후 움직이면 자동으로 스크롤이 위,아래,왼쪽,오른쪽으로 이동된다. 이는 PC에서 큰 이미지를 미리보기 할때 사용하기 좋다. 

참고로 모바일에서는 이러한 이벤트가 없어도 자동으로 터치후 움직이면 스크롤이 이동이 되니 필요가 없다.