zoukankan      html  css  js  c++  java
  • 如何检测当前元素出现在可视区

    //转载

    元素出现在可视区

    scorll滑动的距离>=当前元素距离浏览器最顶端的高度+当前元素自身的高度-当前可视区的高度

    触底

    scorll滑动的距离>=当前scroll总高度-当前可视区的高度

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                    
                }
                .a{
                     100%;
                    /*height: 100%;*/
                    box-sizing: border-box;
                    /*overflow: auto;*/
                }
                .b{
                     100px;
                    height: 100px;
                    border: 1px solid #999;
                    background: #f40;
                    margin-top: 2000px;
                }
            </style>
        </head>
        <body>
            <div class="a" >
                <div class="b">
                    
                </div>
            </div>
        </body>
        <script type="text/javascript">
            let a=document.getElementsByClassName('a')
            let b=document.getElementsByClassName('b')
            window.onscroll=function(){
                            console.log('scroll总高度'+document.documentElement.scrollHeight)
                console.log("滚动条的滚动的高度"+ document.documentElement.scrollTop)
                console.log("元素距离浏览器的高度"+b[0].offsetTop)
                console.log("可视区"+document.documentElement.clientHeight)
                console.log('整体的高度'+(Number(document.documentElement.scrollTop)+Number(document.documentElement.clientHeight)))
            }
        </script>
    </html>
  • 相关阅读:
    2017.8.07
    2017.8.05
    2017.8.04
    2017.8.03
    2017.8.02
    2017.8.01
    2017.7.31
    2017.7.29
    2017.7.28
    简易日历
  • 原文地址:https://www.cnblogs.com/superclound/p/11252535.html
Copyright © 2011-2022 走看看