jquery获取滚动条高度和位置

Posted 2023-04-09

现在我做一个滚动加载效果，但是问题出来了，网上的滚动加载效果获取的滚动条高度和位置都错误，我现在要做个AJAX防腾讯滚动加载效果，就是滚到哪里，就加载到哪里，现在问题是，JQUERY怎么兼容性获取滚动条总高度和已经滚动到得位置，这个是个难题，然后用总高度乘70%，当滚动位置达到总滚动条70%，就自动加载下面的，其余效果喔搞定了，就是获取那个位置不是很好做！

1、jquery获取滚动条高度使用.scrollTop()方法。

2、首先我们新建一个长篇的html文档。

3、然后我们编辑JS脚本，使用.scroll()方法，监听网页滚动。

4、然后我们使用.scrollTop()获取垂直滚动距离。

5、然后保存文件，查看获取的垂直滚动距离即可。

参考技术A 这个是兼容的 我公司的项目就用的这个获取的。
function ScollPostion() //滚动条位置
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop)
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
else if (document.body)
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;

return top: t, left: l, width: w, height: h ;
追问

得出来的结果都有点问题！不是很精确啊！

追答

是吗 我们都用了很久了

追问

我用top/height>0.7
结果top=220，height=950
我都拉到底了啊
你把具体代码给我吧！我估计我代码是不是有问题！

追答

var h =document.body.clientHeight; //页面高度
var c = scollPostion().top; //滚动条top
var wh = $(window).height(); //页面可是区域高度
var s = h - (c + wh);
if ( s/h>0.7 )
// loadings(); // 试试

追问

请教下，怎么获取DIV的BLUR事件，这个事件在INPUT下可以，但是在DIV下无法执行，怎么处理？？？要代码！

追答

我没用过DIV的BLUR事件 不知道能不能用
抱歉

本回答被提问者采纳 参考技术B $(div).scroll(function()
if($(this).attr('scrollTop')/$(this).height() > 0.7)
// loading();

); 参考技术C 参考如下：
获取览器显示区域的高度 ： $(window).height();
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft(); 参考技术D $(document).scrollTop()

我作业是做这个，可是做到最后没有做出来。请问你做出来了吗？可以交流一下吗？
我做出来了之后有一个bug，就是当数据没那么长的时候，滚动条拖动没效果

js,jquery 获取滚动条高度和位置, 元素距顶部距离

一,获取滚动条高度和位置

jQuery
获取览器显示区域的高度： $(window).height(); 
获取浏览器显示区域的宽度：$(window).width();
获取页面的文档高度：$(document).height();
获取页面的文档宽度：$(document).width();

获取滚动条到顶部的垂直高度：$(document).scrollTop()或$(window).scrollTop()
获取滚动条到左边的垂直宽度：$(document).scrollLeft()或$(window).scrollLeft()

Javascript

$(window).scroll(function() {
    console.log(ScollPostion());
});

function ScollPostion() { //滚动条位置
    var t, l, w, h;
    if(document.documentElement && document.documentElement.scrollTop) {
        t = document.documentElement.scrollTop;
        l = document.documentElement.scrollLeft;
        w = document.documentElement.scrollWidth;
        h = document.documentElement.scrollHeight;
    } else if(document.body) {
        t = document.body.scrollTop;
        l = document.body.scrollLeft;
        w = document.body.scrollWidth;
        h = document.body.scrollHeight;
    }
    return {
        top: t,
        left: l,
        width: w,
        height: h
    };
}

 

二,元素距离页面顶部距离:

jQuery

$("#elt_id").offset().top;

 

Javascipt

document.getElementById("elt_id").offsetTop;

 

 

文章来源:http://blog.51cto.com/maplebb/1864637