iOS 5에서 touchmove 이벤트의 기본 동작을 방지하려면 어떻게해야합니까?

Question

사용자가 손가락으로 위아래로 스크롤 할 수있는 구성 요소가 포함 된 웹 기반 응용 프로그램이 있습니다. 이벤트의 preventDefault 메서드를 사용하여 터치 동작이 iOS 장치에서 전체 화면을 이동시키는 기본 동작을 방지합니다.

내가 오늘 아침에 업그레이드 한 iOS 5에서는 불행히도 더 이상 작동하지 않는 것 같습니다. 나는 이것이 iOS 5에서 다르게 수행되었다고 가정해야하지만 지침을 제공하는 리소스를 아직 찾을 수 있어야합니다.

감사합니다.

업데이트 # 1 : 특정 질문에 대한 답변을 찾을 수 없었지만 -webkit-overflow-scrolling 스타일을 사용하기 위해 코드를 약간 조정할 수있었습니다 ("touch ") 스네이크 관성 스크롤 기능을 구현합니다 (스 와이프의 속도에 따라 내용이 더 빨리 스크롤되고 경계에 맞으면"고무 밴드가 튀어 오릅니다 ") ...

업데이트 # 2 : 난 이상한 문제가 생겼어. 오버 플로우 스크롤 동작이 때로는 혼란스러워서 내용물을 위아래로 움직이게하기 위해 손가락을 좌우로 드래그해야한다. 이것이 일어나는 이유를 알아내는 방법 - 누군가는 어떤 생각을 가지고 있습니까?

Answer 1

첫째, 나는 모든 다음 코드를 사용에서 iOS 5에서 스크롤 e.preventDefault()가 비활성화 것을 확인할 수 있습니다

document.ontouchmove = function(e){ e.preventDefault(); } 

불행하게도, 그러나,이 오버 플로우에 스크롤을 비활성화합니다 div의 스크롤. (내부 요소 스크롤링이 가능한 해결책이 있다면 누구나 공유하십시오.)

업데이트 # 2와 관련하여 다른 스크롤 가능한 요소 (페이지 자체 포함)에 중첩 된 스크롤 가능한 요소가있는 경우 이상한 동작을 발견했습니다. 때때로 장치는 사용자가 스크롤하려는 요소를 주저합니다. 특히 위치를 사용하여이 문제를 발견했습니다 : 고정. 내 솔루션은 본문이 100 % 높이인지 확인하고 스크롤 가능 요소는 위치를 사용하는 것이 었습니다 : 가능한 경우 절대.

Answer 2

매우 간단한 해결책을 발견했습니다. 이벤트가 스크롤 할 수있는 요소에 도달하면 이벤트에 플래그를 추가하십시오. 문서의 이벤트 리스너에 플래그가 설정되어있는 경우 바로 확인하고 플래그가 설정되어 있지 않은 경우에만 이벤트를 중지 : 문서에서의 EventListener를 필요 없어요, 그래서

이

this.$scrollableEl.on('touchmove', function(event){ 
    event.comesFromScrollable = true; 
    //when you have containers that are srollable but 
    //doesn't have enough content to scroll sometimes: 
    //event.comesFromScrollable = el.offsetHeight < el.scrollHeight; 
}) 

$document.on('touchmove', function(event){ 
    if(!event.comesFromScrollable){ 
     event.preventDefault() 
    } 
    }) 

또한, 대신 event.stopImmediatePropagation을 사용할 수 있습니다

this.$scrollableEl.on('touchmove', function(event){ 
    event.stopImmediatePropagation() 
})