ipad safari disable scrolling and bounce effect

Question

I m working on a browser based app  currently I m developing and styling for the ipad safari browser   I m looking for two things on the ipad  How can I disable vertical scrolling for pages that don t require it   amp  how can I disable the elastic bounce effect

User · Answer

Solution tested  works on iOS 12 x  This is problem I was encountering      lt body gt   lt  -- the whole body can be scroll vertically -- gt     lt article gt        lt my gallery gt   lt  -- some picture gallery  can be scroll horizontally -- gt       lt  my gallery gt      lt  article gt   lt  body gt    While I scrolling my gallery  the body always scrolling itself  human swipe aren t really horizontal   that makes my gallery useless   Here s what I did while my gallery start scrolling  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 end its scrolling     var html jQuery  html    html css  overflow-y    scroll    document ontouchmove function e  return true     Hope this helps

User · Answer

improved answer  Ben Bos and commented by  Tim  This css will help prevent scrolling and performance issue with css re-render because position changed   little lagging without width and height  body  html     position  fixed    width  100      height  100

User · Answer

Similar to angry kiwi I got it to work using height rather than position   html body     height  100     overflow  hidden      the element that you want to have scrolling    -webkit-overflow-scrolling  touch

User · Answer

Disable safari bounce scrolling effect  html  body     height  100     width  100     overflow  auto    position  fixed

User · Answer

Code to To remove ipad safari  disable scrolling  and bounce effect     document addEventListener  touchmove   function  e            e preventDefault             passive  false       If you have canvas tag inside document  sometime it will affect the usability of object inside Canvas example  movement of object   so add below code to fix it       document getElementById  canvasId   addEventListener  touchmove   function  e            e stopPropagation             passive  false

User · Answer

Tested in iphone  Just use this css on target element container and it will change the scrolling behaviour  which stops when finger leaves the screen   -webkit-overflow-scrolling  auto   https   developer mozilla org en-US docs Web CSS -webkit-overflow-scrolling

User · Answer

To prevent scrolling on modern mobile browsers you need to add the passive  false  I had been pulling my hair out getting this to work until I found this solution  I have only found this mentioned in one other place on the internet    x000D   x000D  function preventDefault e   x000D      e preventDefault    x000D    x000D   x000D  function disableScroll    x000D      document body addEventListener  touchmove   preventDefault    passive  false     x000D    x000D  function enableScroll    x000D      document body removeEventListener  touchmove   preventDefault   x000D    x000D   x000D   x000D

User · Answer

Try this JS solution that toggles webkitOverflowScrolling style  The trick here is that this style is off  mobile Safari goes to ordinary scrolling and prevents over-bounce     alas  it is not able to cancel ongoing drag  This complex solution also tracks onscroll as bounce over the top makes scrollTop negative that may be tracked  This solution was tested on iOS 12 1 1 and has single drawback  while accelerating the scroll single over-bounce still happens as resetting the style 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  amp  amp  setTimeout      gt   xopid     opid   amp  amp  setTouchScroll true   250       if  on  amp  amp  container scrollTop  lt  16        container scrollTop   0     prevScrollTop   container scrollTop        function isBounceOverTop         const dY   container scrollTop - prevScrollTop     return dY  lt  0  amp  amp  container scrollTop  lt  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  lt  0  amp  amp  container scrollHeight - 16  lt         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    amp  amp  isBounceOverTop            setTouchScroll false

User · Answer

overflow  scroll  -webkit-overflow-scrolling  touch    On container you can set bounce effect inside element  Source  http   www kylejlarson com blog 2011 fixed-elements-and-scrolling-divs-in-ios-5

User · Answer

This answer is no longer applicable  unless you are developing for a very old iOS device    Please see other solutions    2011 answer  For a web html app running inside iOS Safari you want something like  document ontouchmove   function event       event preventDefault        For iOS 5 you may want to take the following into account  document ontouchmove and scrolling on iOS 5  Update September 2014  A more thorough approach can be found here  https   github com luster-io prevent-overscroll  For that and a whole lot of useful webapp advice  see http   www luster io blog 9-29-14-mobile-web-checklist html  Update March 2016  That last link is no longer active - see https   web archive org web 20151103001838 http   www luster io blog 9-29-14-mobile-web-checklist html for the archived version instead  Thanks  falsarella for pointing that out

User · Answer

none of the solutions works 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

User · Answer

I know this is slightly off-piste but I ve been using Swiffy to convert Flash into an interactive HTML5 game and came across the same scrolling issue but found no solutions that worked   The problem I had was that the Swiffy stage was taking up the whole screen  so as soon as it had loaded  the document touchmove event was never triggered   If I tried to add the same event to the Swiffy container  it was replaced as soon as the stage had loaded   In the end I solved it  rather messily  by applying the touchmove event to every DIV within the stage  As these divs were also ever-changing  I needed to keep checking them   This was my solution  which seems to work well  I hope it s helpful for anyone else trying to find the same solution as me   var divInterval   setInterval updateDivs 50   function updateDivs        swiffycontainer  gt  div   bind       touchmove        function e            e preventDefault

User · Answer

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   gt  xMovement            e preventDefault                Prevents default Safari scrolling and bounce gestures without detaching your touch event listeners

User · Answer

You can use this jQuery code snippet to do this     document  bind         touchmove             function e                e preventDefault                     This will block the vertical scrolling and also any bounce back effect occurring on your pages

User · Answer

For those who are using MyScript the Web App and are struggling with the body scrolling dragging  on iPad and Tablets  instead of actually writing    lt body touch-action  none  unresolved gt   That fixed it for me

User · Answer

You can use js for prevent scroll   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 than just run stop  toggleScroll func when you opnen close modal    Like this  toggleScroll true    toggleScroll false      This is only for iOS  on Android not working

User · Answer

For those of you who don t want to get rid of the bouncing but just to know when it stops  for example to start some calculation of screen distances   you can do the following  container is the overflowing container element        const isBouncing   this container scrollTop  lt  0        this container scrollTop   this container offsetHeight  gt          this container scrollHeight

User · Answer

You can also change the position of the body html to fixed   body  html     position  fixed

[ipad] ipad safari: disable scrolling, and bounce effect?

Examples related to ipad

Examples related to scroll

Examples related to mobile-safari

Examples related to bounce