가로스크롤 구현

HTML

 

temp를 만들어 놓은 이유는 가로 스크롤이 끝난 뒤에도 스크롤을 계속 했을경우 자동으로 세로 스크롤이 작동하는지 보기 위해서 이다.

 

CSS

 

SCRIPT

 

preventDefault(): 가로 스크롤이 작동 할 경우 세로 스크롤이 동시에 작동되는것을 방지

x = box.clientWidth === box.scrollLeft: 스크롤 바가 오른쪽 끝에 도달했는지 확인

 

deltaY값은  마우스 휠이 위로 향할 경우 음수를, 아래로 향할 경우 양수를 반환하기 때문에 box.scrollLeft 에 더해 줌으로서

왼쪽과 오른쪽 으로 스크롤 방향을 정할 수 있다.

 

이후 가로스크롤이 끝에 도달하고 그 방향으로 계속해서 스크롤을 할 경우 if문에 맞지 않으므로 자동으로 세로스크롤로 넘어간다.