iScroll을 사용하여이 문제에 대한 훌륭한 솔루션을 얻을 수있었습니다. 모멘텀 스크롤링과 모든 것 https://github.com/cubiq/iscroll github doc은 훌륭했고 저는 대부분 그것을 따랐습니다. 내 구현에 대한 세부 정보는 다음과 같습니다.
HTML :
iScroll에서 사용할 수있는 일부 div에서 콘텐츠의 스크롤 가능 영역을 래핑했습니다.
<div id="wrapper">
<div id="scroller">
... my scrollable content
</div>
</div>
CSS :
"터치"에 대한 Modernizr 클래스를 사용하여 스타일 변경 사항을 터치 장치에만 적용했습니다 (터치 할 때만 iScroll을 인스턴스화했기 때문).
.touch #wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.touch #scroller {
position: absolute;
z-index: 1;
width: 100%;
}
JS :
iScroll 다운로드에서 iscroll-probe.js를 포함시킨 다음 아래와 같이 스크롤러를 초기화했습니다. 여기서 updatePosition은 새 스크롤 위치에 반응하는 내 함수입니다.
# coffeescript
if Modernizr.touch
myScroller = new IScroll('#wrapper', probeType: 3)
myScroller.on 'scroll', updatePosition
myScroller.on 'scrollEnd', updatePosition
스크롤 오프셋을 보는 대신 myScroller를 사용하여 현재 위치를 가져와야합니다. 다음은 http://markdalgleish.com/presentations/embracingtouch/ 에서 가져온 기능입니다 (매우 유용한 기사이지만 지금은 약간 구식 임).
function getScroll(elem, iscroll) {
var x, y;
if (Modernizr.touch && iscroll) {
x = iscroll.x * -1;
y = iscroll.y * -1;
} else {
x = elem.scrollTop;
y = elem.scrollLeft;
}
return {x: x, y: y};
}
유일한 다른 문제는 가끔 스크롤하려는 페이지의 일부를 잃어 버리고 스크롤을 거부한다는 것입니다. #wrapper의 내용을 변경할 때마다 myScroller.refresh ()에 대한 일부 호출을 추가해야했고 문제가 해결되었습니다.
편집 : 또 다른 문제는 iScroll이 모든 "클릭"이벤트를 먹는다는 것입니다. iScroll에서 "탭"이벤트를 내보내고 "클릭"이벤트 대신 처리하도록 옵션을 설정했습니다. 고맙게도 스크롤 영역을 많이 클릭 할 필요가 없었기 때문에 큰 문제가 아니 었습니다.
window.pageYOffset
하지 않고 작동하는 것을 감지하는 것이 었습니다document.body.scrollTop||document.documentElement.scrollTop
.