zoukankan      html  css  js  c++  java
  • 如何判断页面的滑动到顶部和底部

    这是新手长遇到的问题,如何判断一个div滑动的位置,不废话,直接代码

    <div id="scrollTest">
            <table>
                <tr>
                    <td>第一行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第二行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第三行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第四行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第五行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第六行</td>
                    <td>说点啥</td>
                </tr>
                <tr>
                    <td>第七行</td>
                    <td>说点啥</td>
                </tr>
            </table>
        </div>
    样式大家可以自己写一下
    <script>
    $("#scrollTest").scroll(function(){
        var h = $(this).height();//div可视区域的高度
    //console.log(h);
    var sh = $(this)[0].scrollHeight;//滚动的高度
    //console.log(sh);
    var st =$(this)[0].scrollTop;//滚动条的高度,即滚动条的当前位置到div顶部的距离
    //console.log(st);
    if ( st<=0){
    //上面试判断滚动条是否已经滑到顶部
    console.log("我在顶部");
    }
    if(h+st>=sh){
    //上面的代码是判断滚动条滑到底部的代码
    console.log("滑到底部了");
    }
    })
    </script>
    我自己也是在工作过程中遇到这些方法喜欢不断的打印从而验证自己的结果是否正确,所以这个根据大家自己,一般我们在做移动端时的刷新,就会经常用限定是否滑动顶端再刷新,这就非常的有用
  • 相关阅读:
    Solon 特性简集,相较于 Springboot 有什么区别?
    Solon 1.2.12 发布,新的惊喜
    Springboot mini
    Springboot mini
    Springboot mini
    Springboot mini
    Springboot mini
    Springboot mini
    Springboot mini
    CODING 静态网站服务升级,快速、稳定、高拓展!
  • 原文地址:https://www.cnblogs.com/share901124/p/7473302.html
Copyright © 2011-2022 走看看