遮挡层滚动条上下固定

最新推荐文章于 2023-05-05 10:17:41 发布

优雅的大白鹅

最新推荐文章于 2023-05-05 10:17:41 发布

阅读量337

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/weixin_48186771/article/details/109292393

版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dj{
           
            width: 500px;
            height: 800px;
           position: relative;
    background:url(./1.jpg),url(./2.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position-y:top,bottom;
    /* background-attachment:fixed; */
    background-size:100% 200px,100% 200px;
    overflow: hidden;
        }
        .zzc{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 600px;
            background-color:rgba(0,0,0,.3);
            width: 500px;
            display: none;
            font-size: 30px;
        }
        .xs{
            width:300px ;
            position: absolute;
            top: 0;
            left: -100px;
            right: 0;
            bottom: 0;
            background-color: #fff;
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div class="dj">点击
        <div style="position: absolute;top:200px;bottom: 200px;overflow: auto; background-color: pink;   font-size: 30px;" > 
        111111111111111111111111
      优雅的大白鹅啊
        555555555555555
        优雅的大白鹅啊
        777777777777777
       喝奶茶不要珍珠
        333333333333333
        44444444444444444
        555555555555555
        66666666666666
        777777777777777  111111111111111111111111
        333333333333333
        44444444444444444
        555555555555555
        666666666666
        111111111111111111111111
        333333333333333
        </div>
    </div>
    <div class="zzc">
        <div class="xs">
            66是个爱睡在床垫下面的假猫咪
        </div>
    </div>
    <script>
        var dj=document.querySelectorAll('.dj')
        var zzc=document.querySelectorAll('.zzc')
        var body =document.body
        var xs=document.querySelectorAll('.xs')
        console.log(dj)
        dj[0].onclick=function () {
            zzc[0].style = "display:block";
            body.style='overflow: hidden;'
                setTimeout(res=>{
                xs[0].style = "left:0px"
            })
        }
        zzc[0].onclick=function(){
            xs[0].style = "left:-100px"
            setTimeout(res=>{
            zzc[0].style = "display:none"
            },300)
        }
        xs[0].onclick=function(event){
        event.stopPropagation(); 
    }

    </script>
</body>

</html>