2012-06-14 4 views
5

나는 시차 거리 장면이있는 웹 사이트를 만들었습니다. 보관 된 버전은 here을 참조하십시오.Android 브라우저에서 스크롤 이벤트가 발생하지 않습니다. 대안이 필요합니다

모든 주요 데스크톱 브라우저와 Safari Mobile에서 잘 작동합니다. 모바일 Firefox 및 Android 용 Chrome 베타에서도 정상적으로 작동합니다. 그러나 기본 Android 브라우저에는 스크롤 이벤트에 문제가 있습니다. 내가 분명히하자. 스크롤링은 문제가되지 않습니다. div는 필요에 따라 스크롤됩니다. 스크롤 이벤트이 발생하지 않습니다. ICS뿐만 아니라 Honeycomb에서도이 문제가 발생합니다.

모바일 화면 크기의 경우 대개 시차 장면이 표시되지 않으므로 다른 모바일 브라우저는 신경 쓰지 않습니다. mediaqueries 및 조건부 JavaScript로드가이를 처리합니다. 반응이 빠른 디자인과 재즈.

기본적으로 필자는 parallise() jQuery 플러그인을 작성하여 각 이미지의 위치와 '깊이'를 기준으로 이미지를 배치합니다. 이 함수는 scroll 이벤트에 바인딩됩니다.

Android 브라우저에서이 이벤트는 다음 터치이 시작될 때만 연속적으로 발생하는 대신 을 발생시킵니다.

좋아요, 그래서 아마도 내 문제를 해결할 것이라고 touchstart, touchmovetouchend 이벤트에 바인딩 된 경우 생각. 시가가 없습니다. Other touch events are also bugged. 제안 된 해결 방법을 적용하면 이벤트가 발생하지만 e.preventDefault()에는 스크롤 (전체 연습)이 비활성화되어 있습니다.

스테이지 div의 위치를 ​​창 div 기준으로 폴링하면 어떻게됩니까? 다음 터치가 시작될 때 위치 정보가 으로 만 업데이트됨을 알 수 있습니다..

나는 내 밧줄 끝에 있습니다. 어떤 도움이라도 대단히 감사 할 것입니다.

+0

좋아, 내가 다른 사이트의 테스트 도메인을 사용해야합니다. 누구든지이 문제를 해결하고 싶다면 의견을 남겨주세요. 다시 올려 드리겠습니다. 이 사이트는 [smartdevice.co.za] (http://smartdevice.co.za)에도 게시되어 있지만 뷰포트는 '960px'로 설정되어 있지 않습니다. 우리는 고객에게 이것이 우리가 통제 할 수없는 브라우저 문제라고 말했고, 문제의 영향은 기본 브라우저 만 실행하는 Android 태블릿에만 국한됩니다. 그러나 후진을 위해 해결책을 알고 있다면 의견을 남겨주세요. –

+0

이 문제를 해결 한 적이 있습니까? – IamDeveloper

+0

불행히도 아닙니다. :(브라우저에 문제가 있습니다. 거의 모든 터치 이벤트에서 사용되는 일부 코드는 예상대로 작동하지 않으므로 어느 순간 터치 이벤트에 의존하기 때문에 해결 방법을 만들 수 없습니다. 우리가 클라이언트를 해고함에 따라 이전 코멘트에 언급 된 사이트에 내 코드가 더 이상 포함되어 있지 않습니다. 사이트의 사본은 http://xandor.co.za/smartdevice에 있습니다. –

답변

1

Android의 도청 된 버전에서 터치 이벤트가 올바르게 작동하고 드래그하는 동안 네이티브 스크롤 위치를 효과적으로 추적 할 수 있었다고해도 오류가 발생하기 쉽습니다. 예를 들어, 터치가 끝난 후 일어나는 운동량 애니메이션을 설명하지 않습니다.

iOS와 Android는 스크롤 성능을 향상시키기 위해 희생합니다. 두 플랫폼 모두에서 스크롤이 완료 될 때까지 정확한 스크롤 위치를 얻을 수 없습니다. 운동 이벤트 애니메이션이 끝날 때까지 스크롤 이벤트 (<body>)가 실행되지 않습니다. 따라서 원래 질문은 넘쳐 흐르는 <div>의 스크롤 이벤트에 관한 것이지만이 문제를 해결하면 어쨌든 완전히 도움이되지 않을 수 있습니다.

스크롤 할 때 애니메이션을 업데이트하려면 브라우저의 기본 스크롤을 사용하는 대신 프로그래밍 방식으로 스크롤을 수행해야합니다. 가장 좋은 라이브러리는 iScroll입니다. this demo에서 볼 수 있듯이 시차 효과를 매우 쉽게 얻을 수 있습니다.

더 복잡한 효과 (예를 들어 걷는 캐릭터)가 필요한 경우 iScroll의 "프로브"버전을 선택하면 성능 저하로 인한 스크롤 위치의 픽셀 완벽한 폴링이 가능합니다.

그러나 많은 단점 iScroll 사용에있다 :

  • 당신은 사용하기 어려울 수 있습니다 마크 업 및
  • 그것은이다 데스크탑 브라우저에 대한 불필요한 오버 헤드,하지만 인해 마크 업 변경 스타일링을 변경해야 할 수도 있습니다 폴백으로 만 사용
  • 일반적으로 뛰어난 스크롤링 성능으로 iOS에서 스크롤링이 완벽하게 느껴지지 않습니다. 운동량 계산의 약간의 차이로 인해 삐걱 거리는 느낌을받을 수 있습니다. Android의 경우 스크롤이 평소보다 느려질 수 있습니다. touchstart에로 preventDefault이 필요하지 않습니다
관련 문제