iPhone/iPad용 Javascript 스크롤 이벤트?

iPhone/iPad용 Javascript 스크롤 이벤트?

iPad에서 스크롤 이벤트를 캡처할 수 없는 것 같습니다.이 일들 중 아무 것도, 내가 무엇을 잘못하고 있습니까?

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

Windows의 Safari 3에서도 모두 작동합니다.는 PC의 모든 브라우저를 지원합니다.window.onload=기존의 사건들을 방해하는 것이 괜찮다면요.하지만 아이패드는 안 됩니다.

OS는 iPhone OS 캡처다니를 합니다.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의 경우 다음과 같은 스크롤 이벤트뿐만 아니라 터치 무브 이벤트도 사용해야 합니다.

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의 내용을 변경할 때마다 Scroller.refresh()에 몇 가지 호출을 추가해야 했고, 그것으로 문제가 해결되었습니다.

편집: 또 다른 문제는 iScroll이 "클릭" 이벤트를 모두 먹는다는 것입니다.iScroll에서 "탭" 이벤트를 내보내는 옵션을 켜고 "클릭" 이벤트 대신 이러한 이벤트를 처리했습니다.고맙게도 스크롤 영역에서 클릭이 많이 필요하지 않았기 때문에 큰 문제는 아니었습니다.

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

그래서, 만약 당신이 등록한다면.scroll이벤트 처리기 및 확인window.pageYOffset그 이벤트 핸들러 안에서는 모든 것이 잘 작동합니다.

ios에서 몇 가지 테스트를 해본 결과, 데스크톱에서 120ms의 지연이 걱정되지 않는다면 이 방법이 ios와 데스크톱에서 사용할 수 있는 방법이라는 것을 알게 되었습니다.매력적으로 작동합니다.

let isScrolling;   
document.addEventListener("scroll", () => {
  // Clear our timeout throughout the scroll
  window.clearTimeout( isScrolling );

  // Set a timeout to run after scrolling ends
  isScrolling = setTimeout(function() {

    // Run the callback
    console.log( 'Scrolling has stopped.' );

  }, 120);
});

언급URL : https://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad