[javascript] iPhone / iPad 용 자바 스크립트 스크롤 이벤트?

Program / 글쓴이

iPad에서 스크롤 이벤트를 캡처 할 수없는 것 같습니다. 이 작업 중 어느 것도 내가 뭘 잘못하고 있습니까?

window.onscroll=myFunction;

document.onscroll=myFunction;

window.attachEvent("scroll",myFunction,false);

document.attachEvent("scroll",myFunction,false);

Windows의 Safari 3에서도 모두 작동합니다. 아이러니하게도 PC의 모든 브라우저는 window.onload=기존 이벤트를 방해하지 않아도 지원 합니다. 하지만 아이 패드는 사용하지 마십시오.

답변

iPhoneOS는 onscroll예상 할 수있는 방식을 제외하고 이벤트를 캡처 합니다.

한 손가락 이동은 사용자가 이동을 중지 할 때까지 이벤트를 생성하지 않습니다 onscroll. 페이지가 이동을 중지하고 다시 그릴 때 이벤트가 생성됩니다 (그림 6-1 참조).

마찬가지로 두 손가락으로 스크롤하면 스크롤을 onscroll중지 한 후에 만 실행 됩니다.

처리기를 설치하는 일반적인 방법은 예를 들어 작동합니다.

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc

( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html 참조 )

답변

iOS의 경우 다음 과 같은 스크롤 이벤트와 함께 touchmove 이벤트 를 사용해야합니다 .

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);

function ScrollStart() {
    //start of scroll event for iOS
}

function Scroll() {
    //end of scroll event for iOS
    //and
    //start/end of scroll event for other browsers
}

답변

이전 게시물에 다른 답변을 추가하여 죄송하지만 일반적 으로이 코드를 사용하여 스크롤 이벤트를 매우 잘 얻습니다 (최소 6.1에서 작동합니다)

element.addEventListener('scroll', function() {
    console.log(this.scrollTop);
});

// This is the magic, this gives me "live" scroll events
element.addEventListener('gesturechange', function() {});

그리고 그것은 나를 위해 작동합니다. 하지 않는 유일한 일은 스크롤의 감속에 대한 스크롤 이벤트를 제공하는 것입니다 (감속이 완료되면 최종 스크롤 이벤트가 발생하고 원하는대로 수행합니다).하지만 이렇게하여 CSS로 관성을 비활성화하면

-webkit-overflow-scrolling: none;

당신은 당신의 요소에 관성을 얻지 않습니다. 

document.addEventListener('touchmove', function(e) {e.preventDefault();}, true);

답변

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에서 “탭”이벤트를 내보내고 “클릭”이벤트 대신 처리하도록 옵션을 설정했습니다. 고맙게도 스크롤 영역을 많이 클릭 할 필요가 없었기 때문에 큰 문제가 아니 었습니다.

답변

iOS 8이 나왔기 때문에이 문제는 더 이상 존재하지 않습니다. 스크롤 이벤트는 이제 iOS Safari에서도 원활하게 시작됩니다.

따라서 scroll이벤트 핸들러 를 등록하고 해당 이벤트 핸들러 window.pageYOffset내부를 확인 하면 모든 것이 잘 작동합니다.

답변