졸업 작품을 만들다가 마우스로 가로 스크롤을 제어하는 기술이 필요했다.
처음 만들어 보는 거라서 잊어 버릴 까봐 적어보았다. 먼저 완성된 작품을 보여주면
가로 스크롤
이렇게 생겼는데 마우스로 오른쪽으로 밀면 오른쪽으로 가고 외쪽으로 밀면 왼쪽으로 간다. 상당히 쉬워 보이지만 막상 할려니깐 css부터 어떻게 제어해야 될지 몰랐다. 그래서 먼저 css 부터 설명하고 js 로 넘어가겠다.
1. css 제어하기
.barlist{
display: flex;
align-items: center;
width: 82%;
height: 70px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
margin-top: 30px;
margin-bottom: 30px;
}
overflow -> 자신의 넓이 보다 요소가 더 많아지게 되면 안보이게 해주는 속성이다.
여기서 넘어가는 부분을 스크롤로 통해서 보고 싶다면 속성을 auto나 scroll로 하면된다.
나는 스크롤이 필요없기 때문에 hidden으로 없애줬다.
2. JS 제어하기
const slider = document.querySelector('.barlist');
let isMouseDown = false;
let startX, scrollLeft;
slider.addEventListener('mousedown', (e) => {
});
slider.addEventListener('mouseleave', () => {
});
slider.addEventListener('mouseup', () => {
});
slider.addEventListener('mousemove', (e) => {
});
IsMouseDown -> 마우스가 클릭됬을때만 실행되게 하는 변수(클릭됬을때만 true)
startX -> 해당 요소에서 시작되는 x 좌표
scrollLeft -> 전체 문서 기준에서 해당 요소의 x좌표
그리고 각각의 마우스 이벤트들을 만들어준다.
slider.addEventListener('mousedown', (e) => {
isMouseDown = true;
console.log(e.pageX,slider.offsetLeft,scrollLeft)
scrollLeft = slider.scrollLeft;
startX = e.pageX - slider.offsetLeft;
});
mousedown 이벤트는 마우스가 클릭됬을때 실행되는 이벤트다.
여기서는 각각의 변수가 무엇을 의미하는지가 중요하다.
x좌표 구하기
e.page -> 전체 문서에서 마우스가 클릭한 x 좌표를 보여준다. (회색 넓이)
slider.offsetLeft -> 전체 문서에서 현재 박스의 마진값을 뺀 실제 위치의 시작 x좌표다.(초록색 넓이)
e.pageX - slider.offsetLeft -> 이 둘의 값을 빼주면 현재 박스 안에서의 x좌표를 구할 수 있다.
slider.scrollLeft-> 스크롤이 얼만큼 이동했는지 보여주는 값이다.
slider.addEventListener('mousemove', (e) => {
if (!isMouseDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1;
slider.scrollLeft = scrollLeft - walk;
});
스크롤에서 가장 중요한 이벤트다. 먼저 간략하게 설정하자면 아까 위에서 만든 mounsedown의 변수 startX값과 여기서 만든 x 값을 비교해서 그 차이를 slider.scrollLeft에 빼주면 된다.
하나씩 설명하자면
여기서 e.pageX는 마우스가 이동할때 마다 바뀐다. 만약 오른쪽으로 밀면 startX보다 작아질 수 밖에 없다. 왼쪽으로 밀면 그 반대가 된다.
오른쪽으로 민다고 가정했을때 변수 x의 값은 마이너스 값이 된다. 따라서 변수 walk는 (x-startX)라서 마우스가 이동한 거리가 된다. 클릭한 지점에서 마우스가 왼쪽으로 가면 마이너스 값이 되고 오른쪽으로 가면 플러스 값이 된다.
마지막으로 현재 스크롤에서 이동한 거리를 빼주면 스크롤이 마우스가 이동한 거리만큼 이동하게 된다.
3. 전체 코드
const slider = document.querySelector('.barlist');
let isMouseDown = false;
let startX, scrollLeft;
slider.addEventListener('mousedown', (e) => {
isMouseDown = true;
scrollLeft = slider.scrollLeft;
startX = e.pageX - slider.offsetLeft;
});
slider.addEventListener('mouseleave', () => {
isMouseDown = false;
});
slider.addEventListener('mouseup', () => {
isMouseDown = false;
});
slider.addEventListener('mousemove', (e) => {
if (!isMouseDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 1;
slider.scrollLeft = scrollLeft - walk;
});
