내가 만든 사이트가 모바일에선 스크롤이 안된다?!

평소 반응형 작업방법

반응형 포트폴리오작업을 할 때는 파일질라에 업뎃하고
핸드폰으로 바로바로 확인하기가 익숙치 않아 구글에서 F12키를 눌러
모바일과 PC를 번갈아가면서 작업해왔다.

그런데..

공들여서 다~만들고 핸드폰에서 확인하려니까 갑자기 메인만 뜨고 스크롤이 안되는거다?!
아무리 새로고침을 해도..
혹시 메인의 overflow hidden 속성때문인가 싶어 지워봤는데도 안 돼서
구글링을 열심히 해 봐도 자바스크립트 스크롤이벤트가 안된다는 얘긴 있어도
나처럼 아예 스크롤이 안 먹는 경우는 안 보였다ㅠㅠ

답은 나한테 있다

그러다 우연히 스크롤이 내려가서 오 이제 되나? 했는데 또 다시 새로고침을 하니까 안되고..
핸드폰을 꼼지락꼼지락 거렸는데 메인 슬라이드가 버튼을 누르지 않고도 손으로 스와이프를 해서
넘어가는 플러그인이었다.

혹시..? 해서 js를 뜯어봤더니

slider.addEventListener("touchmove", (e) => {
       // prevent default function
       e.preventDefault()
       // get the touche position of X on the screen when dragging stops
       move = e.touches[0].clientX
       // Subtract initial position from end position and save to change variabla
       change = start - move
     })

touchmove라는 명령어가 있었고..
편리하려고 있던 기능때문에 스크롤이 원활하게 안 됐던거 아닐까? 싶어 빼보았더니
정상적으로 작동이 됐다!!

코드가 엉클어져서 생긴 문제는 아니라 다행이면서도 허무했지만
이런 경우로 모바일에선 사용자가 오류라고 느끼겠구나 싶어서
해결방안을 알아내 너무 좋았다!

좋은 웹페이지 즐겨찾기