zoukankan      html  css  js  c++  java
  • 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,
             w,
            height: h
        };
    }

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

    jQuery

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

    Javascipt

    document.getElementById("elt_id").offsetTop;

     

     

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

  • 相关阅读:
    (网页)html中页面传递参数不用cookie不用缓存,js方法搞定
    (网页)table加上分页,优点可随便加样式
    (后端)分页比较好的语句
    (后端)Spring手动回滚事务
    jquery 插件开发
    mysql 触发器
    mysql 存储过程
    YaHoo 前端优化军规
    html5 离线存储
    java 网络编程
  • 原文地址:https://www.cnblogs.com/ooo0/p/8367091.html
Copyright © 2011-2022 走看看