jQuery中获取scroll滚动的距离

Posted supercwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery中获取scroll滚动的距离相关的知识,希望对你有一定的参考价值。

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            width:100px;
            height:100px;
            overflow:auto;
        }
        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            
            console.log($(‘.father‘).scrollTop())      //获取div的滚动距离
            $(‘.father‘).scrollTop(100)                //设置滚动条滚动的距离
            console.log($(‘body‘).scrollTop()+$(‘html‘).scrollTop())  //获取浏览器滚动条滚动的距离,考虑到了浏览器兼容性
            $(‘body,html‘).scrollTop(100)                     //设置浏览器滚动条滚动的距离,考虑到兼容性问题,必须这样写
        })
        
    </script>
    
<body>
    <div class="father"> 
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div我是div我是div我是div我是div我是div我是div我是div
        我是div
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>

 

以上是关于jQuery中获取scroll滚动的距离的主要内容,如果未能解决你的问题,请参考以下文章

jquery获取滚动条高度和位置

jquery获取元素与屏幕高度距离

小程序丨怎么获取scroll-view的滑动距离

jquery效果:DIV随浏览器滚动条上下移动

Jquery 判断滚动条到达顶部或底部 (可用于上拉下拉加载刷新)

jquery 让DIV相当于body定位,然后随滚动条向下滚动