<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.fl_layer {
-webkit-transition: -webkit-transform .25s ease;
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
position: fixed;
width: 85%;
top: 0;
bottom: 0;
left: 100%;
color: #333;
background-color: #f7f7f7;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
}
.fl_layer_con {
-webkit-overflow-scrolling: touch;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding-bottom: 50px;
}
.fl_layer.show {
z-index: 301;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.fl_mask {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .5s ease, visibility .5s ease;
transition: opacity .5s ease, visibility .5s ease;
background-color: rgba(0, 0, 0, .7);
z-index: 301;
}
.fl_mask.show {
opacity: 1;
visibility: visible;
}
.overflowHide {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.show.fb_box {
top: 0;
}
.fb_box {
position: fixed;
top: 100%;
bottom: 0;
left: 0;
right: 0;
z-index: 110;
background-color: rgba(0, 0, 0, .7);
}
.show.fb_box .fb_layer {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fb_box .fb_layer {
position: absolute;
-webkit-transform: translate3d(0, 495px, 0);
transform: translate3d(0, 495px, 0);
-webkit-transition: -webkit-transform .2s cubic-bezier(0, 0, .25, 1);
transition: -webkit-transform .2s cubic-bezier(0, 0, .25, 1);
transition: transform .2s cubic-bezier(0, 0, .25, 1);
transition: transform .2s cubic-bezier(0, 0, .25, 1), -webkit-transform .2s cubic-bezier(0, 0, .25, 1);
bottom: 0;
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
width: 100%;
min-height: 375px;
max-height: 475px;
background-color: #fff;
}
.fb_layer_con {
box-sizing: border-box;
max-height: 379px;
padding-bottom: 100px;
}
.fb_layer_con {
max-height: 429px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.st {
position: absolute;
bottom: 0;
display: none;
background: #f5f5f5;
width: 100%;
}
</style>
<body>
<div class="fl">
筛选
</div>
<div class="fb">
下滑
</div>
<div class="dianji">
st
</div>
<div class="fl_box">
<!-- 左滑容器 -->
<div>
<!-- 左滑容器可写内容-->
</div>
<!-- 左滑容器 -->
<div class="fl_mask"></div>
<div class="fl_layer ">
<div class="fl_layer_con">
左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br />左滑内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<div class="fb_box">
<div class="fb_layer">
<div class="fb_layer_con">
下滑内容<br />下滑内容<br />下滑内容<br />下滑内容<br />下滑内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
</div>
</div>
<div class="st">
aaa<br />aaa<br />aaa<br />aaa<br /><br /><br /><br /><br /><br /><br />
</div>
<script src="./jquery.min.js"></script>
<script>
$(function () {
$('.fl').on("click", function () {
$(".fl_box .fl_layer").addClass('show')
$(".fl_box .fl_mask").addClass('show')
$('body').addClass('overflowHide')
})
$(".fb").on('click', function () {
$(".fb_box ").addClass('show')
$(".fb_layer").addClass('show')
$('body').addClass('overflowHide')
})
$('.fl_mask').on('click', function () {
$(".fl_box .fl_layer").removeClass('show')
$(".fl_box .fl_mask").removeClass('show')
$('body').removeClass('overflowHide')
})
$('.fb_box').on("click", function () {
$(".fb_box ").removeClass('show')
$(".fb_layer").removeClass('show')
$('body').removeClass('overflowHide')
})
$('.dianji').on('click', function () {
$('.st').slideToggle()
})
})
</script>
</body>
</html>
10-27