iOS 7-Safari에서 앞뒤로 스 와이프 기능을 비활성화하는 방법이 있습니까?


82

일부 웹 페이지의 경우 iPhone의 왼쪽 및 오른쪽 스 와이프 기능을 사용하여 메뉴를 표시합니다. 이제 iOS7에서는 왼쪽 및 오른쪽으로 스 와이프하여 브라우저 기록의 이전 및 다음 페이지로 앞뒤로 이동할 수있는 기능을 도입했습니다.

그러나 스 와이프 동작에서 충돌 동작이 발생하지 않도록 특정 페이지에 대해 비활성화하는 방법이 있습니까?


화면 밖에서 시작하는 스 와이프로 구분해야합니다. 충돌이 발생한 예제 웹 페이지가 있습니까?
루퍼트 론 즐리

@RupertRawnsley console.log ( 'FIRED!');를 사용하여 웹 페이지에 touchstart / touchmove 이벤트를 추가하십시오. 그것에. 가장자리에서 웹 페이지로 손가락을 이동하면 이벤트가 발생하지 않는 것을 알 수 있습니다. 이것이 새로운 예상 행동이라고 가정하는 것이 옳습니까?
Marcus

2
+ 1입니다. 스 와이프하여 메뉴를 열 때 문제가됩니다.
TYRONEMICHAEL 2013

2
+1 사용자는 오프 스크린 스 와이프와 화면 스 와이프가 무엇인지 전혀 모릅니다. 블러!
Joseph Juhnke 2014 년

1
시력이 좋지 않은 사용자는 확대 / 축소하고 이동해야하는데, 뒤로 스 와이프하는 제스처는 나를 미치게 만듭니다. 누군가 그것을 비활성화하는 방법을 알고 있다면 나는 알고 싶습니다.
Brett Ryan

답변:



12

직접 비활성화 할 수는 없지만 기본 스 와이프는 브라우저 기록에 무언가가있는 경우에만 발생합니다.

모든 경우에 작동하지는 않지만 새 탭에서 단일 페이지 웹 앱을 연 경우 다음을 사용하여 기록에 추가하지 못하도록 할 수 있습니다.

window.history.replaceState(null, null, "#" + url)

pushState 대신 또는

document.location.hash = url

5
예,하지만 탐색 할 때 앱 자체의 기록 만 방지합니다. 다른 앱도 히스토리를 푸시했을 수 있으므로 iOS는 이러한 히스토리도 감지합니다.
dude

5

두 가지 접근 방식을 사용해야했습니다.

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 해킹을 제거 할 수 있습니다.


나는 이것을 추가했고 Mac에서는 왼쪽 스 와이프가 다시 트리거되는 것을 방지합니다. 그러나 뒤로 기능 (뒤로 버튼 포함)이 완전히 중단되므로 해결 방법으로 사용할 수 없습니다.
Šime Vidas

내가 단일 페이지 응용 프로그램을 구축되었을 때 목표였다 내 경우
존 도허티

2
그러나 누군가 다른 웹 사이트의 링크를 클릭하여 앱을 열 수도 있습니다 (예 : 해당 사이트가 앱에 링크 된 경우). 이 문제를 해결하려면 touchmove이벤트 를 통해 스 와이프 제스처를 감지하고 스 와이프 바로 앞에 있지 않은 경우에만 위의 코드를 실행해야합니다 . 가능해야합니다.
Šime Vidas

내가 크롬과 파이어 폭스에서만 옵션 A CSS를 포함하려면이 업데이트되었습니다
존 도허티

iOS에서 작동합니까? overscroll-behavior-x: none;iOS 13의 Chrome에서 방금 테스트 했으며 스 와이프 탐색 동작에 영향을 미치지 않았습니다. 왼쪽 가장자리에서 오른쪽으로 스 와이프하면 뒤로 돌아갑니다 (탭 기록의 첫 페이지 인 경우에도 홈 화면으로 돌아갑니다).
naktinis
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.