解决移动端弹框后底部页面可滑动问题,解决手机端弹框后底部页面滑动问题???

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40028324/article/details/81748849

开发移动端页面时,需求弹窗是经常遇到的,比如点击某个按钮弹个框出来,查看更多,查看规则弹个框出来。

1.弹框都知道咋弄,无非就是一个div,然后css为position:fixed,宽高都为100%,然后通过一个灰色的透明背景来实现蒙层的效果:background-color:rgba(0,0,0,0.6);

2.在这个蒙层里边再写一个div背景是白色的,然后当做内容区。。。。。这里就不多介绍了。把我之前写的一个更多规则的代码帖这 供参考:

    .rule-more-b{
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background:rgba(0, 0, 0, 0.4);
        .rule-content-b{
            box-sizing: border-box;
            border-radius: 10rem/@r;
            width: 85%;
            height: 85%;
            background-color: #fff;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            overflow: hidden;
            padding: 40rem/@r 40rem/@r;
            .back{
                cursor: pointer;
                position: absolute;
                top: 0;
                right: 0;
                text-align: right;
                .back-img{
                    padding: 20rem/@r 20rem/@r 0 0;
                    width: 22px;
                    height: 22px;
                    cursor: pointer;
                }
            }
            .rule-info-b{
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
                height: 100%;
                .rule-title{
                    font-size: 32rem/@r;
                    text-align: center;
                    font-weight: 800;
                }
                .rule-list{
                    .rule-item{
                        text-align: justify;
                    }
                }
            }
        }
    }

 简单说下,弹框里边的内容如果过长就需要滑动,滑动的话overflow:scroll,但是在手机上边滑动总是很不流畅,这时候加一个-webkit-overflow-scrolling:touch;就可以解决了。另外如果你需要你的内容区文字两端对齐,有一个text-align:justify;的属性可以解决,因为我是新手  对于这个text-align属性用的最对的就是让它的内容区为left,center,right。这个justify属性用的少,所以在这里单独提一下。

 然后说正文:怎样解决底部滑动的问题。

1.当出现弹窗的时候,给body设置为 position:fixed;overflow:hidden;

2.关闭弹窗的时候,给body的这两个属性去掉。

注:这个时候你会发现每次关闭弹窗之后,总是在页面的最顶部。

        因为出现弹窗的时候,整个body都脱离文档流了,所以关闭的时候肯定是以当前手机的最顶部为基准的 ,

我是这样解决的:每次点击弹窗按钮的时候,都会记录一下当前滑动的距离,然后当关闭弹窗的时候,再回到那个位置去,代码如下:

 其中的lock样式就是前边提到的两个css样式

  //活动规则与返回
  var thisScrollTop=0
  $(".rule-more-btn").on("click",function(){
    thisScrollTop=$(window).scrollTop();
    $(".rule-more-b").css("display","block");
    $("body").addClass("lock")
  })

  $("body").on("click",".back",function(){
    $("body").removeClass("lock");
    $(window).scrollTop(thisScrollTop);
    $(".rule-more-b").css("display","none");
    thisScrollTop=0;
  })

上述方法是移动端不引入其他库的情况下处理的。其实在移动端写弹窗,内部滑动问题通过overflow:scroll解决不完美,安卓ios总之是会有一些问题的。

那么可以考虑引入一个Iscroll.js插件来解决

附源码:

这个使用vue写的,大概的html部分就是这样的。然后页面内引入

就是这个iscroll插件,可以在github上去下载。

 

使用:

说明:当这个弹窗显示的时候,在nextTick里去调用这个插件,第一个参数是弹窗div的样式名字。第二个参数的作用是,保证弹窗内内容的点击事件可以正常运行,其实就是这个click和taps都是true。

使用完毕后;看下页面的效果====》

原理就是这个库把内容区部分使用transition的方式使其来滑动了,兼容安卓ios。

展开阅读全文

没有更多推荐了,返回首页