当模态出现时如何停止滚动身体并允许固定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
。
答案 0 :(得分: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>
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()
}
})
答案 1 :(得分:0)
这是你需要的吗?
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;