js 모바일웹 아래로 쓸어내리기 방지

예를들어 웹페이지 캔버스엘리먼트에서 js를 이용해 프리드로잉을 해야하는 부분이 있다고 했을때..

기존 마우스 키보드 PC환경에서는 잘그려지는데 반해 모바일환경에서는

그부분이 약간 다르다.. 왜냐면 입력장치가 없기때문에 많은 부분이 손가락 제스처로 

대체되어서 모바일용 웹브라우저가 나왔다..

PC환경에서 프리드로우를 할때 기존 마우스 이벤트는 마우스 누름,이동,올림(나감) 

3가지 이벤트를 받는다. 이렇게 구현해서 모바일에서 테스트해보면 안된다.. ㅋㅋ

아래로 쓸어내리는 행동이 스크롤아래로 하는건지 그냥 마우스 아래로 내린거지 모르니까

모바일에서는 제스처라는 부분이 존해하기때문에 누름, 이동, 올림을 touchstart, touchmove, touchend

로 받아서 마우스 이벤트로 바꿔서 진행해야한다.

mycanvas.addEventListener("touchstart", function (e) {
                var touch = e.touches[0];
                var mouseEvent = new MouseEvent("mousedown", { clientX: touch.clientX, clientY: touch.clientY });
                drawmethod(mouseEvent);
            }, false);

요로코롬 

그리고 또하나의 문제가 프리드로잉을 하다보면 캔버스에서 위에서 아래로 그릴때 모바일브라우저가

돔트리 자체를 스크롤이동하거나  페이지상단에 캔버스가 있을때 위에서 아래로 드로잉하게되면

동그란 모양의 아이콘이 나오면서 모바일 브라우저 새로고침 기능이 동작하게되어

드로잉이 중간중간 씹힌다.  아래로 쓸어내리는게 페이지 새로고침을 하게 할라고 그런거다!!

이럴때 스타일 시트에서 아래처럼 정의해주면 그부분을 막을수 있다.

html,
body {
    overscroll-behavior-y: contain;
}

어짜피 특정페이지 랜더링은 특정뷰에서만 할테니 전체를 관통하는 css에 정의하지말고 

그 특정뷰에 스타일 태그를 추가하여 삽입하는것이 좋다.

그리고 만약에 팝업형태로 백그라운드 디밍을 하면서 절대위치에서 캔버스가 나타나야할때 드로잉을하면

배경에있는 엘리먼트들때문에 스크롤이 움직이면서 팝업된 캔버스가 드로잉된다.

이부분은 제스처 이벤트를 하위로 내려가는것을 방지하는 매커니즘을 넣거나 아니면 나의 경우 팝업을 띄울때

바디 컨텍스트의 display를 없에고 드로잉이 끝나고 팝업을 닫을때 다시 display를 살리는 방식으로 전환하여

스크롤할 컨텐츠가 없게 만들었다. 

그리고 모바일브라우저중 삼성인터넷이라고 있는데 이브라우저는 드로잉을 할때 위아래로 쓸어내리는 

제스처를할때 아래쪽에 메뉴슬라이더가 생성되면서 이벤트를 가져가는 경우가 있다. 

일단한번 메뉴가 띄워지면 드로잉을 하는데는 문제가 되지 않지만 좀 그렇다..  삼성놈들아!!!

이건...   음...  그냥 모바일 크롬을 써!!  -_-;;;;

뭐 어째뜬.. 누군가한테는 도움이 되지..않..