js宽高的加载关系

作者: 阳光之城alt | 来源:发表于2019-04-24 17:51 被阅读0次

image.png

1可视区域加载>第2屏加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="cs">
             <div id="mm" class="sh ">sss</div>
        </div>
        ss
        <script type="text/javascript">
        function sc(){
            var sc=document.getElementById("cs")
            var mm=document.getElementById("mm")
            var clients=innerHeight||document.documentElement.clientHeight||document.body.clientHeight
            var divtop=sc.getBoundingClientRect().top
            console.log(clients,divtop)
            if(divtop<=clients){
                mm.classList.remove("sh")
            console.log("pppp")
            }   
        }   
        window.onscroll=sc
        </script>
        
        <style>
            #cs{width: 500px;height: 350px;background: deepskyblue;margin: 1000px 0 auto 0;}
            #mm{display: none;}
            .sh{display: none;}
        </style>
        
    </body>
</html>