模拟滚动也是在项目中遇到的常见布局。布局要求弹层出来后，弹层中的内容可以滚动，弹层背后的列表不能随弹层滚动而滚动。并且在弹层上滑动的时候，整个页面也不能随之滚动。
经过前几步的练习，以下是我做的小demo。
先贴图：
图一
图二
html：
<div class="father">
<!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防止点击时页面穿透-->
<section class="content-body">
<ul>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
<li class="item">
<div class="left-container">
<p class="top-container">
<span class="top-word">跟团游</span>
<span class="triangle"></span>
</p>
<img class="pic" src="img/scenic.jpg" alt="">
<p class="bottom-word">
上海出发世纪东方卡就是看到雷锋
</p>
</div>
</li>
</ul>
</section>
<!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防止点击时页面穿透-->
<section class="layout" style="display:none;">
</section>
<!--页面内容、蒙层、蒙层中的内容互为兄弟节点，防止点击时页面穿透-->
<section class="layout-body" style="display:none;">
<ul class="area">
<li class="area-all">
<span>全部</span>
</li>
<li class="area-item">
<span>北京</span>
</li>
<li class="area-item">
<span>上海</span>
</li>
<li class="area-item">
<span>广州</span>
</li>
<li class="area-item">
<span>深圳</span>
</li>
<li class="area-item">
<span>成都</span>
</li>
<li class="area-item">
<span>武汉</span>
</li>
<li class="area-item">
<span>四川</span>
</li>
<li class="area-item">
<span>江西</span>
</li>
<li class="area-item">
<span>河南</span>
</li>
<li class="area-item">
<span>贵州</span>
</li>
</ul>
</section>
</div>
css：
body,
p,
ul,
li {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
/*item的样式*/
.item {
padding: 0 10px;
}
.left-container {
position: relative;
display: flex;
flex-direction: column;
width: 140px;
}
.item::after {
content: '';
display: block;
margin-top: 5px;
width: 100%;
height: 0;
border-top: 1px solid #999;
}
.pic {
display: block;
width: 100%;
height: auto;
}
.top-container {
position: absolute;
left: 0;
top: 0;
z-index: 999;
display: flex;
height: 20px;
/*font-size: 0;原本是为了解决间隙问题；因为有了display: flex;这个就不需要了；*/
overflow: hidden;
}
.top-word {
height: 20px;
line-height: 20px;
padding-left: 10px;
overflow: hidden;
background-color: #ff0;
font-size: 10px;
text-align: center;
-webkit-line-clamp: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
.triangle {
display: inline-block;
/* 控制宽高为0，用border宽度撑出一个三角形 */
width: 0;
height: 0;
border-left: 8px solid #ff0;
border-top: 20px solid #ff0;
border-right: 8px solid transparent;
border-bottom: 20px solid transparent;
}
.bottom-word {
overflow: hidden;
width: 100%;
font-size: 10px;
background-color: #999;
padding: 10px 0;
text-align: center;
-webkit-line-clamp: 1;
white-space: nowrap;
text-overflow: ellipsis;
}
/*这次demo的重点，蒙层*/
.father {
width: 100%;
height: 100%;
/* 页面高度设置为屏幕高度，正常情况下超出滚动 */
overflow-y: scroll;
}
.content-body {
width: 100%;
height: 100%;
/* 内容高度设置为屏幕高度，正常情况下超出滚动 */
overflow-y: scroll;
/*一定要加下面的2个属性，否则蒙层出现，这个content-body还是能滚动*/
position: absolute;
z-index: 10;
}
.layout {
height: 100%;
width: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 1000000;
}
.layout-body {
height: 46%;
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 1);
overflow: scroll;
z-index: 1000001;
}
.area-all {
font-size: 30px;
color: #f00;
text-align: center;
}
.area-item {
padding: 10px;
font-size: 26px;
line-height: 30px;
text-align: center;
}
.area-all:hover,
.area-item:hover {
background-color: #999;
color: #fff;
}
>
这个方法虽然实现了页面模拟滚动的效果，但是当蒙层弹出的时候设置了overflow:hidden会导致页面scrollTop变成0，页面相当于被滚到顶部了。如果UI或者PM不愿意，请与他们撕逼。
这里最需要注意的，就是.content-body一定要让它脱离文档流。如果没有定位，是没有z-index的。这个问题我也不造怎么说，反正就是不加这两个属性，蒙层出来，.content-body还是能滚动，overflow: hidden;没起作用。希望大神赐教！
.content-body {
width: 100%;
height: 100%;
/* 内容高度设置为屏幕高度，正常情况下超出滚动 */
overflow-y: scroll;
/*一定要加下面的2个属性，否则蒙层出现，这个content-body还是能滚动*/
position: absolute;
z-index: 10;
}
JavaScript：
<script src="jquery-2.1.0.js"></script>
<script>
// 事件代理
/*$(document).on('click', ".item", function(e) {
$(".layout").show();
$(".layout-body").show();
})*/
// 直接绑定
$(".item").on('click', function(e) {
$(".layout").show();
$(".layout-body").show();
$(".father").css("overflow-y", "hidden");
$(".content-body").css("overflow-y", "hidden");
});
$(".layout").on("click", function(e) {
$(this).hide();
$(".layout-body").hide();
$(".father").css("overflow-y", "scroll");
$(".content-body").css("overflow-y", "scroll");
});
$(".area-item").on("click", function(e) {
$(".layout").hide();
$(".layout-body").hide();
})
</script>