7

How can I prevent overscroll in Safari iOS? I would use the touch gesture for navigate on a site but I can't.

I tried this:

$(window).on('touchstart', function(event) {

    event.preventDefault();

});

But in this way I disabled all gesture, infact I can't zooming with pinch-in and pinch-out.

Any solutions? Thanks.

keepyourweb
  • 664
  • 4
  • 10
  • 19

2 Answers2

14

This way will allow scrollable elements while still preventing the overscroll in the browser itself.

//uses document because document will be topmost level in bubbling
$(document).on('touchmove',function(e){
  e.preventDefault();
});
//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
  if (e.currentTarget.scrollTop === 0) {
    e.currentTarget.scrollTop = 1;
  } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
    e.currentTarget.scrollTop -= 1;
  }
});
//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
  e.stopPropagation();
});
Tyler Dodge
  • 1,057
  • 8
  • 5
7

This Should be the easiest way to accomplish this:

$(function() {
    document.addEventListener("touchmove", function(e){ e.preventDefault(); }, false);
});

Hope this helps.

Best.

Todd
  • 5,314
  • 3
  • 28
  • 45
  • 1
    This works perfectly, retains scrolling on divs and minimal code! – IlludiumPu36 Mar 18 '14 at 04:28
  • 1
    I did...can only do it once!! – IlludiumPu36 Mar 19 '14 at 06:22
  • 2
    @NeedHelp, this blocks my scrollable divs also. Did you do something extra to keep them scrollable? – Yves Van Broekhoven Mar 31 '14 at 10:10
  • @Yves Van Broekhoven...I used this custom scroller http://manos.malihu.gr/jquery-custom-content-scroller/ but even without it I still get scrollable divs... – IlludiumPu36 Apr 01 '14 at 01:42
  • @Yves Van Broekhoven...Have a look at http://130.95.21.121/museum/search.php and choose the System checkbox then select Digestive system and All in the dependant menu. Search results will fill the LH div and it's scrollable. The page can't be moved due to Todd's code above. – IlludiumPu36 Apr 01 '14 at 01:47
  • so, @YvesVanBroekhoven, try removing the `$(function(){...});` from around my no-overscroll code. that's the only problem i see right off hand; you've got two document-on-ready handlers as result. I'm running late, but will take a closer look later today, and try and help you. – Todd Apr 01 '14 at 12:29
  • Thx @Needhelp, sorry for the late response. Haven't figured it out so far. Keep you posted. – Yves Van Broekhoven Apr 09 '14 at 18:31