[CSS, JS] 뒤로가기 스와이프 방지하는 두가지 방법

현재 크롬으로 키오스크처럼 서비스하고 있는 화면이 터치로 이용하게 되어있어서,

고객들이 실수로 화면을 쓸어넘길경우 뒤로가기나 앞으로가기가 동작하는 일이 종종 발생했고,

나머지 납품한 제품들도 같은이슈로 골머리를 앓고 있었습니다.

 

결론부터 말씀 드리자면, 

body {
  overscroll-behavior-x: none;
}

이거 한 줄로 끝났습니다.

대신, 바디에 통으로 이걸 쓰게되면 말그대로 좌우로 움직이는 횡스크롤을 쓸 수 없게 되므로,

필요한 특정 구역에서만 사용하거나, class로 만들어서 붙이는 방법을 쓰는것이 나을 수 있습니다.

 

 

뭐 아이오닉 프레임워크에서 제어하고있는 샘플 소스가 있어서 

vue-swipe ... 프레임워크도 설치해보고.. 크롬 옵션도 뒤져보고..ㅋㅋ 

history.pushState(null, null, location.href)
	window.onpopstate = function () {
	history.go(1)
}

자바스크립트에서 history를 지워서 지나온 페이지를 기억하지 못하게 하는 방법도 있으나,

동작이 좀 이상하더라고요. 경우에 따라서는 이 방법이 쓰일때도 있겠네요.