Disable Scrolling in All Mobile Devices

Disable scrolling in all mobile devices

html, body {
  overflow-x: hidden;
}
body {
  position: relative;
}

The position relative is important, and i just stumbled about it. Could not make it work without it.

Disable vertical scroll in mobile device only fory body (not also for div with overflow: auto)

i solved always with jQuery:

when i want disable scroll add:

    $("body").css({"overflow":"hidden",'position':'fixed'});

with body: fixed i'm sure that also with mobile device is impossible scroll the page (except div that has overflow: auto

Disable scroll on mobile devices

I think you are asking how to disable scroll on mobile devices:

You can add an event listener for touchstart and touchmove. Then when these events are triggered use Modernizr to detect whether the browser is a touch device. Obviously not all mobiles are touch devices and there are touch devices that have high resolution so feel free to add or to the if statement.

document.addEventListener('touchstart', this.touchstart);
document.addEventListener('touchmove', this.touchmove);

function touchstart(e) {
    e.preventDefault()
}

function touchmove(e) {
    e.preventDefault()
}

Or, just use Modernizr and then use CSS:

html.touch body {
     overflow:hidden;
}

And then add media-queries to effectively have your or statements.

I manage to disable scroll on body when menu mobile is open , but desktop / body page always going back to the top when i open menu mobile

When you apply position : fixed; and then return you will reset the position of your body because a fixed element isn't part of the page's flow

We must then change it's height from 100% to 100vh so the element's (in this case the body) height takes the whole screen and prevent any scrollbar to appear since we defined a height.

.overflowHidden {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  /* position: fixed; we get rid of this line which resets the flow of the page */
  /* height: 100%; we change 100% to 100vh */ 
  height: 100vh;
}

Disable horizontal scroll on mobile devices

Use this style

@media only screen and (max-width: 600px) {
  body {
    overflow-x: hidden!important;
  }
}

Disable horizontal scrolling on mobile devices (or with scroll-click)

I copied the HTML of your site to my local server, and this seems to work. Let me know if your milage varies.

In your header, add this. We're basically telling mobile devices do disable zooming in and out, and setting the scale to 1:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">

Add this style for a div that will wrap the #main div:

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
  }
</style>

Update: on one of my mobile devices, this was not sufficient, so I had to use the following styles:

<style type="text/css">
  #container {
    overflow-x:hidden;
    width:100%;
    position:relative;
    top:7vh;
    height:53vh;}
  #main {
    top:0;
  }
</style>

Now wrap your #main div with the div #container. Because of the CSS added in the previous step, anything wider than 100% of the browser width should be hidden.

<div id="container">
  <div id="main">
    .
    .
    .
  </div>
</div>

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>