일부 웹 페이지의 경우 iPhone의 왼쪽 및 오른쪽 스 와이프 기능을 사용하여 메뉴를 표시합니다. 이제 iOS7에서는 왼쪽 및 오른쪽으로 스 와이프하여 브라우저 기록의 이전 및 다음 페이지로 앞뒤로 이동할 수있는 기능을 도입했습니다.
그러나 스 와이프 동작에서 충돌 동작이 발생하지 않도록 특정 페이지에 대해 비활성화하는 방법이 있습니까?
일부 웹 페이지의 경우 iPhone의 왼쪽 및 오른쪽 스 와이프 기능을 사용하여 메뉴를 표시합니다. 이제 iOS7에서는 왼쪽 및 오른쪽으로 스 와이프하여 브라우저 기록의 이전 및 다음 페이지로 앞뒤로 이동할 수있는 기능을 도입했습니다.
그러나 스 와이프 동작에서 충돌 동작이 발생하지 않도록 특정 페이지에 대해 비활성화하는 방법이 있습니까?
답변:
아니요, 이것은 OS 수준에서 수행되며 웹 페이지는 콜백을받지 않습니다.
웹 사이트에 문제를 일으킬 수있는 iOS7의 Safari 변경 사항 요약을 참조하십시오 (이 스 와이프 동작 포함).
직접 비활성화 할 수는 없지만 기본 스 와이프는 브라우저 기록에 무언가가있는 경우에만 발생합니다.
모든 경우에 작동하지는 않지만 새 탭에서 단일 페이지 웹 앱을 연 경우 다음을 사용하여 기록에 추가하지 못하도록 할 수 있습니다.
window.history.replaceState(null, null, "#" + url)
pushState 대신 또는
document.location.hash = url
두 가지 접근 방식을 사용해야했습니다.
1) Chrome / Firefox 전용 CSS 수정
html, body {
overscroll-behavior-x: none;
}
2) Safari 용 JavaScript 수정
if (window.safari) {
history.pushState(null, null, location.href);
window.onpopstate = function(event) {
history.go(1);
};
}
시간이 지남에 따라 Safari는 overscroll-behavior-x를 구현 하고 JS 해킹을 제거 할 수 있습니다.
touchmove
이벤트 를 통해 스 와이프 제스처를 감지하고 스 와이프 가 바로 앞에 있지 않은 경우에만 위의 코드를 실행해야합니다 . 가능해야합니다.
overscroll-behavior-x: none;
iOS 13의 Chrome에서 방금 테스트 했으며 스 와이프 탐색 동작에 영향을 미치지 않았습니다. 왼쪽 가장자리에서 오른쪽으로 스 와이프하면 뒤로 돌아갑니다 (탭 기록의 첫 페이지 인 경우에도 홈 화면으로 돌아갑니다).