Prevent body scrolling on mobile device

Issue

How to stop scrolling of body when modal appears and allow fixed div scroll ? I tried but i can’t handle it. Any solution ?

<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>
      <!-- Live example have lot of items -->
   </ul>
</div>
<div class="content">
   Many items will be place here
</div>

Here is link i am working on

Here is for view

I tried -webkit-overflow-scrolling: auto and body style with overflow: hidden.

Solution

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>

You’ll also have to use something like this to stop Touch Move on iOS

    this.$scrollableEl.on('touchmove', function(event){
  event.comesFromScrollable = true;
  //when you have containers that are srollable but 
  //doesn't have enough content to scroll sometimes:
  //event.comesFromScrollable = el.offsetHeight < el.scrollHeight;
})

$document.on('touchmove', function(event){
    if(!event.comesFromScrollable){
      event.preventDefault()
    }
  })

Answered By – Austin Jones

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.