javascript scroll event for iPhone iPad

Question

I can t seem to capture the scroll event on an iPad  None of these work  what I am doing wrong   window onscroll myFunction   document onscroll myFunction   window attachEvent  scroll  myFunction false    document attachEvent  scroll  myFunction false     They all work even on Safari 3 on Windows  Ironically  EVERY browser on the PC supports window onload  if you don t mind clobbering existing events  But no go on iPad

User · Answer

I was able to get a great solution to this problem with iScroll, with the feel of momentum scrolling and everything https://github.com/cubiq/iscroll The github doc is great, and I mostly followed it. Here's the details of my implementation.

HTML: I wrapped the scrollable area of my content in some divs that iScroll can use:

<div id="wrapper">
  <div id="scroller">
    ... my scrollable content
  </div>
</div>

CSS: I used the Modernizr class for "touch" to target my style changes only to touch devices (because I only instantiated iScroll on touch).

.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: I included iscroll-probe.js from the iScroll download, and then initialized the scroller as below, where updatePosition is my function that reacts to the new scroll position.

# coffeescript
if Modernizr.touch
  myScroller = new IScroll('#wrapper', probeType: 3)
  myScroller.on 'scroll', updatePosition
  myScroller.on 'scrollEnd', updatePosition

You have to use myScroller to get the current position now, instead of looking at the scroll offset. Here is a function taken from http://markdalgleish.com/presentations/embracingtouch/ (a super helpful article, but a little out of date now)

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}; 
}

The only other gotcha was occasionally I would lose part of my page that I was trying to scroll to, and it would refuse to scroll. I had to add in some calls to myScroller.refresh() whenever I changed the contents of the #wrapper, and that solved the problem.

EDIT: Another gotcha was that iScroll eats all the "click" events. I turned on the option to have iScroll emit a "tap" event and handled those instead of "click" events. Thankfully I didn't need much clicking in the scroll area, so this wasn't a big deal.

User · Answer

Sorry for adding another answer to an old post but I usually get a scroll event very well by using this code  it works at least on 6 1   element addEventListener  scroll   function         console log this scrollTop           This is the magic  this gives me  live  scroll events element addEventListener  gesturechange   function          And that works for me  Only thing it doesn t do is give a scroll event for the deceleration of the scroll  Once the deceleration is complete you get a final scroll event  do as you will with it   but if you disable inertia with css by doing this  -webkit-overflow-scrolling  none    You don t get inertia on your elements  for the body though you might have to do the classic   document addEventListener  touchmove   function e   e preventDefault      true

User · Answer

For iOS you need to use the touchmove event as well as the scroll event like this   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

User · Answer

The iPhoneOS does capture onscroll events  except not the way you may expect      One-finger panning doesn   t generate any events until the user stops panning   an onscroll event is generated when the page stops moving and redraws   as shown in Figure 6-1          Similarly  scroll with 2 fingers fires onscroll only after you ve stopped scrolling         The usual way of installing the handler works e g   window addEventListener  scroll   function     alert  Scrolled           or   window  scroll function     alert  Scrolled           or window onscroll   function     alert  Scrolled          etc     See also https   developer apple com library content documentation AppleApplications Reference SafariWebContent HandlingEvents HandlingEvents html

User · Answer

Since iOS 8 came out  this problem does not exist any more  The scroll event is now fired smoothly in iOS Safari as well   So  if you register the scroll event handler and check window pageYOffset inside that event handler  everything works just fine

[javascript] javascript scroll event for iPhone/iPad?

Examples related to javascript

Examples related to iphone

Examples related to ipad

Examples related to scroll

Examples related to onscroll