javascript - 防止 body 在移动设备上滚动

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

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

Answer 1

打开时将内容的高度更改为 100% 并设置溢出:隐藏；会成功的。所以写一个 css 类有

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

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

这是一个示例，请注意，您必须在整页中查看代码段才能看到无滚动。您还必须解决 iOS 的 Touch Move 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()
    }
  })