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％并设置溢出：0;会做的。所以写一个有

的css类

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

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

下面是一个示例，请注意您必须在整页中查看该片段以查看无滚动。你还必须解决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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: