Ipad safari: disable scroll and bounce effect?

Question

I am working on a browser, I am currently developing and style a Safari browser for ipad.

I am looking for two things on ipad: how to disable vertical scrolling for pages that do not require this? and how can I turn off the elastic rebound effect?

Answer 1

This answer is no longer applicable if you are not developing for a very old iOS device ... See other solutions

---

2011 answer: for a web / html application running on iOS Safari you need something like

document.ontouchmove = function(event){ event.preventDefault(); } 

For iOS 5, you can consider the following: document.ontouchmove and scrolling on iOS 5

September 2014 Update: A more thorough approach can be found here: https://github.com/luster-io/prevent-overscroll . For this and many useful web application tips, see http://www.luster.io/blog/9-29-14-mobile-web-checklist.html

March 2016 update. The last link is no longer active - instead, see https://web.archive.org/web/20151103001838/http://www.luster.io/blog/9-29-14-mobile-web-checklist.html archived version. Thanks @falsarella for pointing this out.

Answer 2

You can also change the position of the body / html to a fixed:

 body, html { position: fixed; } 

Answer 3

To prevent scrolling in modern mobile browsers, you need to add a passive: false. I pulled out my hair, making it work until I found this solution. I found this mentioned elsewhere on the Internet.

 function preventDefault(e){ e.preventDefault(); } function disableScroll(){ document.body.addEventListener('touchmove', preventDefault, { passive: false }); } function enableScroll(){ document.body.removeEventListener('touchmove', preventDefault); } 

Answer 4

You can use this jQuery code snippet to do this:

 $(document).bind( 'touchmove', function(e) { e.preventDefault(); } ); 

This blocks vertical scrolling, as well as any return effect on your pages.

Answer 5

 overflow: scroll; -webkit-overflow-scrolling: touch; 

On the container, you can set the effect of failures inside the element

Source: http://www.kylejlarson.com/blog/2011/fixed-elements-and-scrolling-divs-in-ios-5/

Answer 6

I know this is a little off-track, but I used Swiffy to convert Flash into an interactive HTML5 game and ran into the same scrolling, but didn't find any solutions that worked.

The problem was that the Swiffy scene was full screen, so once it was loaded, the document’s touchmove event never fired.

If I tried to add the same event to the Swiffy container, it was replaced immediately after loading the stage.

In the end, I solved this (rather randomly) by applying the touchmove event to each DIV as part of the stage. Since these divs were also constantly changing, I needed to check them.

That was my solution, which seems to work well. Hope this helps anyone trying to find the exact same solution as me.

 var divInterval = setInterval(updateDivs,50); function updateDivs(){ $("#swiffycontainer > div").bind( 'touchmove', function(e) { e.preventDefault(); } );} 

Answer 7

Try this JS sollutuion :

 var xStart, yStart = 0; document.addEventListener('touchstart', function(e) { xStart = e.touches[0].screenX; yStart = e.touches[0].screenY; }); document.addEventListener('touchmove', function(e) { var xMovement = Math.abs(e.touches[0].screenX - xStart); var yMovement = Math.abs(e.touches[0].screenY - yStart); if((yMovement * 3) > xMovement) { e.preventDefault(); } }); 

Prevents default Safari scrolling and bouncing without disconnecting your touch event listeners.

Answer 8

none of the solutions work for me. This is how I do it.

  html,body { position: fixed; overflow: hidden; } .the_element_that_you_want_to_have_scrolling{ -webkit-overflow-scrolling: touch; } 

Answer 9

Tested on iphone. Just use this css in the container of the target element and it will change the scroll behavior, which stops when the finger leaves the screen.

 -webkit-overflow-scrolling: auto 

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Answer 10

For those who use MyScript in a web application and struggle with scrolling / dragging the body (on iPad and tablets) instead of writing:

<body touch-action="none" unresolved>

This fixed it for me.

Answer 11

You can use JS to prevent scrolling:

 let body = document.body; let hideScroll = function(e) { e.preventDefault(); }; function toggleScroll (bool) { if (bool === true) { body.addEventListener("touchmove", hideScroll); } else { body.removeEventListener("touchmove", hideScroll); } } 

And toggleScroll just start / stop the toggleScroll function when opening / closing modal mode.

toggleScroll(true)/toggleScroll(false)

(This is only for iOS, it doesn’t work on Android)

Answer 12

Try this JS solution that toggles webkitOverflowScrolling style. The trick is that this style is disabled, the mobile Safari switches to the usual scrolling and prevents excessive bounce - alas, it cannot cancel the current drag and drop. This complex solution also tracks onscroll as a bounce from the top makes scrollTop negative, which can be tracked. This solution was tested on iOS 12.1.1 and has one drawback: when scrolling is accelerated, a single jump still occurs, since a style reset may not cancel it immediately.

 function preventScrollVerticalBounceEffect(container) { setTouchScroll(true) //!: enable before the first scroll attempt container.addEventListener("touchstart", onTouchStart) container.addEventListener("touchmove", onTouch, { passive: false }) container.addEventListener("touchend", onTouchEnd) container.addEventListener("scroll", onScroll) function isTouchScroll() { return !!container.style.webkitOverflowScrolling } let prevScrollTop = 0, prevTouchY, opid = 0 function setTouchScroll(on) { container.style.webkitOverflowScrolling = on ? "touch" : null //Hint: auto-enabling after a small pause makes the start // smoothly accelerated as required. After the pause the // scroll position is settled, and there is no delta to // make over-bounce by dragging the finger. But still, // accelerated content makes short single over-bounce // as acceleration may not be off instantly. const xopid = ++opid !on && setTimeout(() => (xopid === opid) && setTouchScroll(true), 250) if(!on && container.scrollTop < 16) container.scrollTop = 0 prevScrollTop = container.scrollTop } function isBounceOverTop() { const dY = container.scrollTop - prevScrollTop return dY < 0 && container.scrollTop < 16 } function isBounceOverBottom(touchY) { const dY = touchY - prevTouchY //Hint: trying to bounce over the bottom, the finger moves // up the screen, thus Y becomes smaller. We prevent this. return dY < 0 && container.scrollHeight - 16 <= container.scrollTop + container.offsetHeight } function onTouchStart(e) { prevTouchY = e.touches[0].pageY } function onTouch(e) { const touchY = e.touches[0].pageY if(isBounceOverBottom(touchY)) { if(isTouchScroll()) setTouchScroll(false) e.preventDefault() } prevTouchY = touchY } function onTouchEnd() { prevTouchY = undefined } function onScroll() { if(isTouchScroll() && isBounceOverTop()) { setTouchScroll(false) } } } 

Answer 13

The solution is tested, works on iOS 12.x

This is the problem I encountered:

 <body> <!-- the whole body can be scroll vertically --> <article> <my_gallery> <!-- some picture gallery, can be scroll horizontally --> </my_gallery> </article> </body> 

While I scroll through my gallery, the body always scrolls itself (the human movement is not really horizontal), which makes my gallery useless.

Here's what I did when my gallery started to scroll

 var html=jQuery('html'); html.css('overflow-y', 'hidden'); //above code works on mobile Chrome/Edge/Firefox document.ontouchmove=function(e){e.preventDefault();} //Add this only for mobile Safari 

And when my gallery finishes its scrolling ...

 var html=jQuery('html'); html.css('overflow-y', 'scroll'); document.ontouchmove=function(e){return true;} 

Hope this helps ~

Answer 14

Safari ipad removal code: disable scrolling and bounce effect

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

If you have a canvas tag inside a document, this will sometimes affect the usability of the object inside the Canvas (example: moving the object); so add the code below to fix it.

  document.getElementById("canvasId").addEventListener("touchmove", function (e) { e.stopPropagation(); }, { passive: false }); 

Answer 15

improved @Ben Bos answer and @Tim comment

This CSS will help prevent scrolling and performance issues when re-rendering CSS, because the position has changed / slight lag without width and height

 body, html { position: fixed; width: 100%; height: 100% } 

Answer 16

Like an angry kiwi, I made it work using height rather than position:

 html,body { height: 100%; overflow: hidden; } .the_element_that_you_want_to_have_scrolling{ -webkit-overflow-scrolling: touch; }