iPhone Web App - Stop Body Scrolling

Disable scrolling in an iPhone web application?

'self.webView.scrollView.bounces = NO;'

Just add this one line in the 'viewDidLoad' of the mainViewController.m file of your application. you can open it in the Xcode and add it .

This should make the page without any rubberband bounces still enabling the scroll in the app view.

How to disable scrolling on body in iOS 13 safari (when saved as PWA to the homescreen)?

I combined try 2 and try 4 from the question. The fixed body shows no overflow scrolling and the scroll reset prevents the long animation of the overflow scrolling in the background. It's really ugly but it kinda works.

body {
  position: fixed;
}

window.addEventListener("scroll", (e) => {
  e.preventDefault();
  window.scrollTo(0, 0);
});

iPhone Web App - Stop body scrolling

After reviewing several solutions, I began to create a custom solution:

bouncefix.js

http://jaridmargolin.github.io/bouncefix.js/

Usage:

bouncefix.add(el)

Apply fix so that the given element no longer causes a full body elastic bounce when scrolling at its extremes.

bouncefix.remove(el)

Remove all listeners/observers responsible for fixing the full body elastic bounce.

Why?

Scrollfix was a good start, however I noticed several problems:

1. It only worked when there was scrollable content. If you had an
   empty page, the bounce effect on the body would occur.
2. The API did not expose a method to remove the listeners. My app will
   have multiple pages, and it didn't feel right to keep all of the
   listeners attached as the user moved around the app.

How?

It uses a similar approach to that of scrollfix. The problem occurs when you are at one of the scrolling extremes. On touchstart, we look to see if we are at the top extreme or bottom extreme, adding 1px if we are at the top, and removing 1px if we are at the bottom.

Unfortunately, this trick only works if we are able to set the scrollTop value. If the content is not yet scrollable, for example, you only have 1 list item, the whole body will again scroll. Bouncefix.js will take care of all of this behind the scenes by using event delegation and checking the scrollHeight against the offsetHeight anytime touchstart is triggered. In the case that there is no scrollable content, all scrolling on the container is blocked with e.preventDefault();

ipad safari: disable scrolling, and bounce effect?

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.

Disabling iOS elastic body scroll & keep native scrolling working

I've adapted the good solution from Conditionally block scrolling/touchmove event in mobile safari using Dojo:

var initialY = null;
dojo.connect(document, 'ontouchstart', function(e) {
    initialY = e.pageY;
});
dojo.connect(document, 'ontouchend', function(e) {
    initialY = null;
});
dojo.connect(document, 'ontouchcancel', function(e) {
    initialY = null;
});
dojo.connect(document, 'ontouchmove', function(e) {
    if(initialY !== null) {
        if(!dojo.query(e.target).closest('#content')[0]) {
            // The element to be scrolled is not the content node
            e.preventDefault();
            return;
        }

        var direction   = e.pageY - initialY;
        var contentNode = dojo.byId('content');

        if(direction > 0 && contentNode.scrollTop <= 0) {
            // The user is scrolling up, and the element is already scrolled to top
            e.preventDefault();
        } else if(direction < 0 && contentNode.scrollTop >= contentNode.scrollHeight - contentNode.clientHeight) {
            // The user is scrolling down, and the element is already scrolled to bottom
            e.preventDefault();
        }
    }
});

The element to be scrolled is #content in this case.

Prevent body scrolling on mobile device

Changing the height of the content to 100% on open and setting overflow: hidden; will do the trick. So write a css class that has

.no-scroll {height:100%; overflow:hidden;}

then use jQuery to add that class when the input has focus and remove the class when user leaves focus.

Heres a sample, note you will have to view the snippet in full page to see the no scroll. You will have to also work around Touch Move for ios Here is a codepen off of yours that does what you want.

jQuery(document).ready(function(){
    var field = $(".searchMe");
    field.keypress(function(){
       $("#modal").show(); 
        $('.content').addClass('no-scroll') //add class
       $(".result").show();
    });
    field.blur(function(){
        $("#modal").hide();
       $(".result").hide();
      $('.content').removeClass('no-scroll') //remove class
    });
});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &::before,
  &::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
  }
}

body {
  background: #e6e5e4;
}

.content {
  padding-top: 60px;
  width: 100%;
  height: 1800px;
  background: darken(#e6e5e4, 15%);
}

// Search
.search {
  position: fixed;
  top: 0;
  z-index: 2;
  height: 50px;
  width: 100%;
  background: #eee;
  input {
    width: 100%;
    height: 100%;
    border: 1px solid #374c45;
    font-size: 16px;
    padding: 0 0 0 1em;
  }
}

#modal {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(0,0,0,0.6);
}

.result {
  display: none;
  position: fixed;
  z-index: 2;
  top: 50px;
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  background: transparent;
}
/*class to stop scrolling */
.no-scroll {overflow:hidden;height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="search">
   <input type="text" placeholder="search here" class="searchMe">
</div>
<div id="modal"></div>
<div class="result">
  <ul>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
    <li>Result from type</li>
  </ul>
</div>
<div class="content">
    Many items will be place here
</div>

html, body {
  height: 100%;
  overflow: hidden;
}

var $docEl = $('html, body'),
  $wrap = $('.content'),
  $.scrollTop;

$.lockBody = function() {
  if(window.pageYOffset) {
    scrollTop = window.pageYOffset;

    $wrap.css({
      top: - (scrollTop)
    });
  }

  $docEl.css({
    height: "100%",
    overflow: "hidden"
  });
}

$.unlockBody = function() {
  $docEl.css({
    height: "",
    overflow: ""
  });

  $wrap.css({
    top: ''
  });

  window.scrollTo(0, scrollTop);
  window.setTimeout(function () {
    scrollTop = null;
  }, 0);
}