移动端遮罩层滚动问题（安卓滚动正常），解决iOS浏览器滚动底部也跟着滚动问题
注意点：
凡是页面脱离文档流（包含position:fixed,position:absolute），执行touchmove事件时，取消冒泡事件，默认事件
========半透明遮罩层，添加touchmove事件
$(".black-shade").on('touchmove',function(e){ console.log(e); e.stopPropagation(); e.preventDefault();//阻止默认事件 })
========遮罩层内容滚动
//获取滚动的高度
let scrollTop = 0;
function getScrollTop() {
let scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop;
}else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;
}
//赋值滚动的高度
function setScrollTop(scroll_top){
document.documentElement.scrollTop = scroll_top;
document.body.scrollTop = scroll_top;
}
// 遮罩层 显示 body隐藏
export function filtrateShow(fixedDiv,bottomDiv,_className){
let scroll_top = getScrollTop();
scrollTop = scroll_top;
fixedDiv.addClass(_className);
if(scroll_top != 0){
let top = scroll_top - fixedDiv.height();
$("html,body").css({"position":"fixed","top":(-1)*top+'px',"overflow":"hidden","z-index":1,"left":0,"right":0,"width":"100%"});
}else{
bottomDiv.css({"padding-top":fixedDiv.height() + 'px',"height":"100%"});
$("html,body").css({"position":"fixed","top":(-1)*scroll_top+'px',"overflow":"hidden","z-index":1,"left":0,"right":0,"width":"100%"});
}
}
//遮罩层 隐藏 body显示
export function filtrateHide(fixedDiv,bottomDiv,_className){
fixedDiv.removeClass(_className);
$("html,body").css({"position":"static","top":'auto',"overflow":"auto","z-index":"auto","width":"100%","height":"auto"});
setScrollTop(scrollTop);
if(scrollTop <= 0){
bottomDiv.css({"padding-top":'0px'});
}else{
bottomDiv.css({"padding-top":fixedDiv.height() + 'px'});
}
}
//解决iOS遮罩层滚动，底部跟着滚动问题 _this:整个div parent:overflow-y:scroll的div child:parent的子元素
export function blackTouchMove(_this,parent,child){
_this.on("touchmove",function(e){
let childHeight = $(this).find(child).height();
let parentHeight = $(this).find(parent).height();
let top = $(this).find(parent).scrollTop();
let currentScroll = top + $(this).find(parent).get(0).offsetHeight + 1;
let totalScroll = $(this).find(parent).get(0).scrollHeight;
//判断子元素的高度是否大于父元素
if(parentHeight + 1 < childHeight){
//获取当前滚动的高度
if(top == 0){
$(this).find(parent).scrollTop(1);
}else if(currentScroll >= totalScroll){
$(this).find(parent).scrollTop(top - 1);
e.stopPropagation();
e.preventDefault();//阻止默认事件
}
}else{
e.stopPropagation();
e.preventDefault();//阻止默认事件
}
/*if(_this.find(e.target).length == 0){
e.stopPropagation();
e.preventDefault();//阻止默认事件
}*/
});
}
HTML结构如下：
<div class="filtrate">
<div class="filtrate-relative">
<div class="filter-msg">
<div class="filtrate-list">
<div class="filtrateHeight">
<div class="filtrate-list-item" data-id="item.id">
<p class="title">品牌1</p>
<div class="choose-list">
<div class="choose-item" data-id="1">建设银行A</div>
</div>
</div>
<div class="filtrate-list-item" data-id="item.id">
<p class="title">品牌1</p>
<div class="choose-list">
<div class="choose-item" data-id="1">建设银行A</div>
</div>
</div>
</div>
</div>
<div class="filtrate-btns">
<button class="filtrate-cancel">取消</button>
<button class="filtrate-submit">确定</button>
</div>
</div>
</div>
<div class="fix-bg" id="black-filtrate"></div>
</div>
CSS样式
@import "../../../css/common.less";
@import "./filtrate.less";
@import "./list-type.less";
@import "./res-item.less";
@fontColor:#A8A8A8;
@borderBottom:#ECECEC;
.triangle(@w:6px){
width:0;
height:0;
border-width:@w;
border-style: solid;
}
.triangle(B,@color){
.triangle();
border-color:@color transparent transparent transparent;
}
.triangle(T,@color){
.triangle();
border-color: transparent transparent @color transparent;
}
.triangle(L,@color){
.triangle();
border-color:transparent @color transparent transparent;
}
.triangle(R,@color){
.triangle();
border-color:transparent transparent transparent @color;
}
body{
position:relative;
height:auto;
}
.auto-fixed,body{
background-color:@_colorWhite;
}
* {
box-sizing: border-box;
}
.nFixed{
position:fixed;
top:0;
left:0;
right:0;
z-index:507;
}
.gen-choose{
position:relative;
padding:8px 10px 0 10px;
display: flex;
display: -webkit-flex;
align-items: center;
border-bottom:1px solid @borderBottom;
.gen-choose-item{
position:relative;
/*flex:1;
margin-right:6px;*/
width:calc(~"25% - 5px");
margin-right:5px;
//min-width:85px;
border:1px solid transparent;
border-bottom:none;
&:last-child{
margin-right:0;
}
.choose-item{
margin-bottom:10px;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
border-radius: 30px;
line-height:30px;
background-color:#F3F3F3;
p{
color:#000000;
font-size:12px;
}
i{
display: block;
margin-top:6px;
margin-left:3px;
.triangle(B,#8F8F8F);
}
}
&.active{
border:1px solid #E8E8E8;
border-bottom:none;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
.choose-item{
position:relative;
background-color:transparent;
i{
margin-bottom:12px;
margin-left:3px;
.triangle(T,#FCDE39);
}
}
.trans-border{
width:100%;
position:absolute;
bottom:-1px;
left:0;
border:2px solid #fff;
z-index:2;
}
}
}
.gen-choose-shade{
display: none;
margin:0 auto;
position:fixed;
top:0;
left:0;
right:0;
width:100%;
max-width:750px!important;
height:179px;
z-index:501;
.item-msg{
position:absolute;
padding-bottom:45px;
width:100%;
height:100%;
z-index:502;
.item{
padding:0 15px;
height:100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
background-color:@_colorWhite;
.itemHeight{
padding:5px 0;
display: flex;
flex-flow: wrap;
.txt{
padding: 5px 0;
width: 50%;
&.active{
color:#FFB51D;
}
}
}
}
.gen-choose-btns{
position:absolute;
bottom:0;
width:100%;
height:45px;
display: flex;
align-items: center;
border-top:1px solid #ECECEC;
button{
width:50%;
height:45px;
border:none;
background-color:transparent;
&:focus{
outline:none;
}
}
.choose-cancel{
color:#A8A8A8;
border-bottom-left-radius: 10px;
background-color:@_colorWhite;
}
.choose-submit{
color:#000;
border-bottom-right-radius: 10px;
background-color:#FCDE39;
}
}
}
.black-shade{
width:100%;
height:100%;
background-color:rgba(0,0,0,.5);
}
}
}
.gen-imgs{
padding:15px 10px;
/*display: flex;
align-items: center;
flex-wrap:wrap;*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.positionX(){
position:absolute;
top:0;
left:0;
}
.black-shade{
display: none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
overflow: hidden;
background-color:rgba(0,0,0,.5);
z-index:505;
}
//筛选列表
.filtrate{
max-width:750px!important;
display: none;
margin:0 auto;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:508;
.filtrate-relative{
position:absolute;
right:0;
top:0;
width:80%;
height:100%;
z-index:502;
.filter-msg{
position: relative;
width:100%;
height:100%;
background-color:@_colorWhite;
.filtrate-btns{
position:absolute;
bottom:0;
padding:10px 10px 20px;
display: flex;
width:100%;
background-color:@_colorWhite;
button{
padding:6px 0;
flex:1;
margin-right:10px;
border:1px solid transparent;
background-color:transparent;
border-radius: 15px;
font-size:15px;
&:last-child{
margin-right:0;
}
&:focus{
outline:none;
}
}
.filtrate-cancel{
border:1px solid #F3F3F3;
color:#A8A8A8;
}
.filtrate-submit{
border:1px solid #FCDE39;
background-color:#FCDE39;
color:#000000
}
}
}
}
.fix-bg{
width:100%;
height:100%;
background-color:rgba(0,0,0,.5);
}
}
js调用：
//阻止遮罩层滚动时，底部跟着滚动；
blackTouchMove($(".filtrate").find(".filtrate-relative"),".filtrate-list",".filtrateHeight");
浙公网安备 33010602011771号