防止在移动设备上滚动正文

Question

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 .

Answer 1

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() } })

Answer 2

Is this you need?

jsfiddle

 var winPos; $('.searchMe').keypress(function () { winPos = $(window).scrollTop(); $('html').addClass('modal-open').css('top', - winPos + 'px'); $('#modal').addClass('open'); }); $('#modal, .close').click(function () { $('#modal').removeClass('open'); $('html').removeClass('modal-open').removeAttr('style'); $(window).scrollTop(winPos); }); $('.modal-content').click(function (event) { event.stopPropagation(); });

 html { height: 100%; max-height: 100%; } html.modal-open { position: fixed; width: 100%; overflow-x: hidden; overflow-y: auto; z-index: 1; padding-right: 17px; } #modal.open { display: block; } #modal { display: none; background-color: rgba(0, 0, 0, 0.4); position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow-y: auto; overflow-x: hidden; z-index: 2; -webkit-overflow-scrolling: touch; } .modal-content { background-color: #fff; height: 100px; width: 300px; margin: 50px auto; }

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