사실 PC의 마우스는 화면을 가로로 스크롤하는 기능을 대부분 지원하지 않는다.

그래서 scroll002.html에서는 PC에서는 화면 세로 스크롤에 따라 화면이 옆으로 움직이고, 모바일에서만 화면 가로 스크롤에 따라 화면이 옆으로 움직이게 만들어져 있다.

일단 scroll002.html의 소스코드를 공개하겠다.

*

window.onload = function(){
    function zoom1(event) {
      event.preventDefault();
        var winWidth = window.innerWidth;
      if(event.deltaY > 0){
          document.getElementById('nav').querySelector('ul').scrollBy({top: 0, left: -winWidth-11, behavior: "smooth"});
      }else if(event.deltaY < 0){
          document.getElementById('nav').querySelector('ul').scrollBy({top: 0, left: winWidth+11, behavior: "smooth"});
      }
    }
    
    var startPoint = 0;
    function zoomsave2(event){
        startPoint = event.touches[0].pageX;
        //console.log("startpoint:"+startPoint);
    }

    function zoom2(event) {
      event.preventDefault();
        var winWidth = window.innerWidth;
        //console.log("movepoint:"+event.touches[0].pageX);
      if(event.touches[0].pageX > startPoint){
          document.getElementById('nav').querySelector('ul').scrollBy({top: 0, left: -winWidth-11, behavior: "smooth"});
      }else if(event.touches[0].pageX < startPoint){
          document.getElementById('nav').querySelector('ul').scrollBy({top: 0, left: winWidth+11, behavior: "smooth"});
      }
    }

    
var el = document.getElementById('nav');
el.onwheel = zoom1; // PC
el.ontouchstart = zoomsave2; // Mobile
el.ontouchmove = zoom2; // Mobile

}

*

여기서 zoom1 함수가 PC에서 동작하는 함수이고, zoomsave2와 zoom2 함수가 모바일에서 동작하는 함수다.

유감스럽게도 ontouchend를 지원하는 자바스크립트 함수는 현재 없다. 있더라도 비표준일 것이다.

그래서 ontouchstart, ontouchmove로 이벤트를 받아서 처리해야 한다.

touches[]가 배열로, 0인 이유는, 사용자들이 대체로 화면을 스크롤할 때 한 개의 손가락을 사용하기 때문이다. 혹여나 두 손가락 이상을 사용하더라도, touches[0]은 항상 첫번째 손가락이기 때문에 동작에 무리가 없다.

해당 소스코드는 화면을 가로로 넘기는 것 중 가장 기본적인 부분만을 구현한 것이고, 안의 글자 등까지 애니메이션을 넣으려면 추가로 소스코드가 더 필요할 것이다.

*

소스코드 다운로드: https://zoahaza.shop/?product=%ea%b0%80%eb%a1%9c-%ec%8a%a4%ed%81%ac%eb%a1%a4-javascript-%ec%86%8c%ec%8a%a4%ec%bd%94%eb%93%9c

*

사실 이 소스코드는 [일반인 P선생]의 동업 제안으로 만들어졌다. 뜻이 맞지 않아 동업 제안은 성공적으로 전행되지 못했지만, 그 대신 이 소스코드는 남았다.

어쩌면 [일반인 P선생]이 이 소스코드를 발견하고 가져가서 쓸지도 모른다. 그래도 된다. 해당 소스코드를 받아서 쓰는 데에는 아무런 제한이 없다.

[일반인 P선생]과 있었던 이야기는 되도록이면 코멘트를 하지 않겠다. 안좋은 일을 떠벌려 봤자 나에게 좋을 게 없다.

*

– 블로그 썸네일은 flaticon에서 제공받았습니다. –

2022년 12월 10일 작성.