I'm trying to prevent element from scrolling in safari on iphone. I've tried solutions mentioned here: 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.

• javascript
• iphone
• css
• safari
• webkit

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

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.

var viewport_x = window.pageXOffset;
var viewport_y = window.pageYOffset;