[Javascript] 마우스 휠을 통해서 가로 드래그 하기

 

[Javascript] 클릭해서 드래그로 가로 스크롤 구현 하기 (click and drag)

위의 글과 연결 되는 내용인데, 내가 윈도우로 가로 드래그를 구현 후 맥에서 빌드를 하면 자꾸 드래그가 안된다는 이슈가 발생하여 아예 마우스의 휠로 드래그를 할 수 있게 스크립트를 만들었다. 

 

[코드]

scrollContainer.addEventListener("wheel", (e) => {
    e.preventDefault();
    const delta = e.deltaY || e.detail || e.wheelDelta;
    scrollContainer.scrollLeft += delta;
});

 

 

e.preventDefault();  마우스 휠 이벤트의 기본 동작을 모두 막음 (세로 스크롤 될 수도 있으니까) 

e.deltaY  휠 이벤트에서 수직 휠의 움직임을 나타내는 값으로 위로 움직이면 음수 아래로 움직이면 양수이다. 

e.detail 구형 브라우저에서 휠 이벤티의 세부사항을 나태내는 값 

e.wheelDelta 휠의 움직임을 나타내는 값으로 위로 움직일때 120, 아래로 움직일때 -120의 값을 가진다. 

세가지를 비교하여 첫번째로 유효한 값을 delta 변수에 할당한다. 

scrollContainer.scrollLeft += delta  delta 값에 따라 수평 스크롤을 조정한다.