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

最新推荐文章于 2020-10-28 15:27:07 发布

weixin_34192732

最新推荐文章于 2020-10-28 15:27:07 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ooo0/p/8367091.html

本文介绍了使用jQuery和JavaScript获取滚动条的位置、高度以及元素相对于页面顶部的距离等实用技巧。适用于网页开发中需要处理滚动事件及元素定位的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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
    };
}