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>
    我自己也是在工作过程中遇到这些方法喜欢不断的打印从而验证自己的结果是否正确,所以这个根据大家自己,一般我们在做移动端时的刷新,就会经常用限定是否滑动顶端再刷新,这就非常的有用
  • 相关阅读:
    ubuntu下crontab启动,重启,关闭命令
    解决ubuntu16.04下boot空间不足的方法
    Go语言变量作用域
    Go语言函数
    xftp取消自动更新
    nginx下http如何转https访问
    mysql 5.7.22 zip安装
    微服务本机搭建
    微服务集成mybatis问题
    eclipse导入本地maven项目时,有的项目的结构是文件夹的机构
  • 原文地址:https://www.cnblogs.com/share901124/p/7473302.html
Copyright © 2011-2022 走看看