get viewport position in javascript in iphone safari

Question

Hi everyone,

I'm trying to prevent element from scrolling in safari on iphone. I've tried solutions mentioned here: http://stackoverflow.com/questions/777621/iphone-safari-scroll-a-list-inside-a-html-container But my list is large and it doesn't work so smoothly.

What I have in mind is to detect onscroll event and reposition the element, so it's in the boundaries of viewport.

But I can't find way to detect coordinates of the viewport. Can anybody help with this?

Thanks.

Answer 1

document.addEventListener(
 'touchmove',
 function touchMove(event) {
  event.preventDefault()
 },
 false
);

Answer 2

So what does this do exactly? Does it prevent the view port from moving or what? How would I call this function to position a div relative to the view port??

Answer 3

Take a look at iScroll. If is doesn't do what you want, you can use the implementation for reference. I think the trick so to do both event.preventDefault() and event.stopPropagation() to keep mobile safari from responding to the touch events.

iScroll was born because mobile webkit (on iPhone, iPod, Android and Pre) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web-app to have a position:absolute header and/or footer and a scrolling central area for contents.