防止在移动设备上滚动身体

Question

当模态出现并允许固定 div 滚动时如何停止滚动正文？我试过了，但我无法处理。有什么解决办法吗？

<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>

这是我正在工作的链接on

这里是view

我用overflow: hidden 尝试了-webkit-overflow-scrolling: auto 和body 样式。

Answer 1

在打开和设置溢出时将内容的高度更改为 100%：0；会成功的。所以写一个有

的css类

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

然后使用 jQuery 在输入具有焦点时添加该类，并在用户离开焦点时删除该类。

这是一个示例，请注意，您必须在整页中查看 sn-p 才能看到无滚动。您还必须解决 Touch Move for ios Here 是您的代码笔，可以满足您的需求。

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>

您还必须使用类似的东西来停止 iOS 上的 Touch Move

    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

这是你需要的吗？

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>