精华内容
下载资源
问答
  • [js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介 我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易, 但坚持一定很酷。 主目录 与...

    [js] 获取浏览器当前页面的滚动条高度的兼容写法

    document.documentElement.scrollTop || document.body.scrollTop;
    

    个人简介

    我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
    但坚持一定很酷。

    主目录

    与歌谣一起通关前端面试题

    展开全文
  • 在开发中,兼容性问题是最常见,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器的写法 IE6/7/8 document.documentElement.scrollTop IE9以上 window....

    前言

    在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了

    各浏览器的写法

    • IE6/7/8
    document.documentElement.scrollTop
    • IE9以上
    window.pageYOffset或者document.documentElement.scrollTop
    • Safari
    window.pageYOffsetdocument.body.scrollTop
    • Firefox
    window.pageYOffset 或者 document.documentElement.scrollTop
    • Chrome
    document.body.scrollTop

    具体的写法

    通过上面列出的主流浏览器的兼容性,其实我们不难看出,其实只要我们判断到document.body.scrollTop和document.documentElement.scrollTop就会包括上面所有的浏览器;故最终的写法

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);

    如果需要监听滚动条,那么就监听onscroll事件即可;如

    document.body.onscroll = function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        console.log(scrollTop);
    }
    展开全文
  • 最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离...jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); 获取页面的文档高

    最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:

       一、jQuery获取的相关方法

    Js代码  收藏代码
    1. jquery 获取滚动条高度  
    2.   
    3. 获取浏览器显示区域的高度 :   
    4. $(window).height();   
    5. 获取浏览器显示区域的宽度 :  
    6.   
    7. $(window).width();   
    8. 获取页面的文档高度 :  
    9. $(document).height();   
    10. 获取页面的文档宽度 :$(document).width();  
    11.   
    12. 获取滚动条到顶部的垂直高度 :  
    13.   
    14. $(document).scrollTop();   
    15. 获取滚动条到左边的垂直宽度 :  
    16.   
    17. $(document).scrollLeft();  
    18.   
    19. 计算元素位置和偏移量:  
    20.   
    21. $(id).offset();  
    22.   
    23. offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。  
    24.   
    25. offset(options, results)  
    26. options.relativeTo  指定相对计  
    27. 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。  
    28. options.scroll  是否把  
    29. 滚动条计算在内,默认TRUE  
    30. options.padding  是否把padding计算在内,默认false  
    31. options.margin  
    32.   是否把margin计算在内,默认true  
    33. options.border  是否把边框计算在内,默认true  
    34.   
    35.    

     但是我在使用jQuery的方法的时候在IE6上会发生不兼容现象。

     

      二、使用js获取的相关方法

     

    Js代码  收藏代码
    1. //回到页面顶部  
    2.     $("#goTotop").click(function(){  
    3.         $('body,html').animate({scrollTop:0},1500); //点击按钮让其回到页面顶部  
    4.     });  
    5.       
    6.     $(window).scroll(function() {  
    7.         var yheight1=window.pageYOffset; //滚动条距顶端的距离  
    8.         var yheight=getScrollTop(); //滚动条距顶端的距离  
    9.         var height =document.documentElement.clientHeight//浏览器可视化窗口的大小  
    10.         var top=parseInt(yheight)+parseInt(height)-217;  
    11.         var divobj=$(".kf");  
    12.         divobj.attr('style','top:'+top+'px;');  
    13.     })  
    14.       
    15. /** 
    16.  * 获取滚动条距离顶端的距离 
    17.  * @return {}支持IE6 
    18.  */  
    19. function getScrollTop() {  
    20.         var scrollPos;  
    21.         if (window.pageYOffset) {  
    22.         scrollPos = window.pageYOffset; }  
    23.         else if (document.compatMode && document.compatMode != 'BackCompat')  
    24.         { scrollPos = document.documentElement.scrollTop; }  
    25.         else if (document.body) { scrollPos = document.body.scrollTop; }   
    26.         return scrollPos;   
    27. }  

     getScrollTop()使用这个方法在IE、谷歌和火狐上都能获取,当然这不是我原创的,也是有哥们贴网上的,我只是在此收藏整理一下。

    展开全文
  • 主要功能:获取浏览器显示区域(可视区域)的高度 :$(window).height();获取浏览器显示区域(可视区域)的宽度 :$(window).width();获取页面的文档高度$(document).height();获取页面的文档宽度 :$(document).width()...

    主要功能:

    获取浏览器显示区域(可视区域)的高度 :

    $(window).height();

    获取浏览器显示区域(可视区域)的宽度 :

    $(window).width();

    获取页面的文档高度

    $(document).height();

    获取页面的文档宽度 :

    $(document).width();

    浏览器当前窗口文档body的高度:

    $(document.body).height();

    浏览器当前窗口文档body的宽度:

    $(document.body).width();

    获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)

    $(document).scrollTop();

    获取滚动条到左边的垂直宽度 :

    $(document).scrollLeft();

    获取或设置元素的宽度:

    $(obj).width();

    获取或设置元素的高度:

    $(obj).height();

    某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)

    某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)

    返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)

    返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)

    //返回当前页面高度

    function pageHeight(){

    if($.browser.msie){

    return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight :

    document.body.clientHeight;

    }else{

    return self.innerHeight;

    }

    };

    //返回当前页面宽度

    function pageWidth(){

    if($.browser.msie){

    return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :

    document.body.clientWidth;

    }else{

    return self.innerWidth;

    }

    };

    以下是其它网友的补充:

    获取浏览器显示区域的高度 : $(window).height();

    获取浏览器显示区域的宽度 :$(window).width();

    获取页面的文档高度 :$(document).height();

    获取页面的文档宽度 :$(document).width();

    获取滚动条到顶部的垂直高度 :$(document).scrollTop();

    获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

    计算元素位置和偏移量:$(id).offset();

    offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。

    offset(options, results)

    options.relativeTo  指定相对计

    算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。

    options.scroll  是否把

    滚动条计算在内,默认TRUE

    options.padding  是否把padding计算在内,默认false

    options.margin

    是否把margin计算在内,默认true

    options.border  是否把边框计算在内,默认true

    子页面控制父页面:

    parent.document.documentElement.scrollTop;

    parent.document.documentElement.clientHeight;

    展开全文
  • jq:获取浏览器显示区域(可视区域)的高度 :$(window).height();获取浏览器显示区域(可视区域)的宽度 :$(window).width();获取页面的文档高度$(document).height();获取页面的文档宽度 :$(document).width();...
  • JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width();...获取页面的文档高度 ...浏览器当前窗口文档body的高度: ...
  • js如何获取滚动条的高度

    万次阅读 2013-01-25 16:37:27
    由于市面上浏览器的种类众多,但是浏览器没有一个...对应后者,可以通过window对象pageYOffset属性来取到当前滚动条页面顶部的高度。对于万恶IE来说就比较麻烦一点,它依赖当前文档类型。文档类型分为Standards
  • 因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息。在实现这个要求之前,先来看看在js中有哪些工具...
  • 当前位置(滚动条)里浏览器顶部的高度 //l当前位置(滚动条)里浏览器左边的长度(0) //width当前浏览器的宽 //页面加起来的总高度(一般页面的高度都会大于浏览器高度,所以就有了滚动条)。 var t, l, w, h; if ...
  • 原理: 获取当前屏幕(窗体)宽度和高度,因为不同浏览器的窗体大小是不一样。有了这个,可以计算出来垂直居中坐标。但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到...
  • 浏览器页面的滚动事件 $(window).scroll(function() { // 当页面发生滚动时要做的事情 }); 获取当前页面内容区域的高度 $(window).innerHeight() 通常用 innerHeight()/2 内容区域一半的高度 获取 滚动条到...
  • $(window).height();//是可见区域的高度,当...$(document).scrollTop() 获取垂直滚动距离 即当前滚动地方窗口顶端到整个页面顶端距离$(document).scrollLeft() 这是获取水平滚动条的距离 获取顶端: 只...
  • 其实这个对于我们开发兼容性web页面还是很有帮助,我们都知道,盒模型渲染在 Standards Mode和Quirks Mode是有很大差别,在不声明Doctype情况下,浏览器默认是Quirks Mode。所以为兼容性考虑,我们可能需要...
  • 滚动条的控制

    2012-07-24 10:31:00
    jQuery用于滚动条的方法... //获取当前浏览器可视部分的高度,也就说在浏览器窗口改变大小时,这个值也会改变; $(document).height(); //获取整个页面的高度(包含不可视部分); $(document).scrollTop(); //不带参...
  • $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scrollLeft() 获取...
  • 代码如下:$(document).height() //是获取整个页面的高度$(window).height() //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的要获取顶端,...
  • jQuery检测滚动条(scroll)是否到达底部

    千次阅读 2018-02-06 10:04:32
    $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 scr
  • jQuery检测滚动条到达底部

    千次阅读 2016-02-18 10:18:39
    获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的 scrollTop()  获取匹配元素相对滚动条顶部的偏移。 scrollLeft() 获取匹配元素
  • jquery获取页面参数

    2012-07-27 11:10:24
    //获取横向滚动条向下滚动距离 $(window).scrollLeft();//获取横向滚动条向右滚动距离$(document).height(); //浏览器当前窗口文档的高度 $(document.body).height();//浏览器当前窗口文档body的高度 $...
  • jQuery获取位置和尺寸相关...获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的。 scrollTop() 获取匹配元素相对滚动条顶部的偏移。 s...
  • 这里是下面的代码所示:$(document).height() //是获取整个页面的高度$(window).height() //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的....
  • 之前写代码,都是在当前窗口位于居中,可是一旦窗口缩小或者放大都不是位于居中位置了,但是一直想写一个类似于alert弹...这个时候就要获取当前窗体距离页面顶部的高度和横向滚动条移动宽度,加到刚刚y轴...
  • 获取当前滚动条到顶部距离、文档高度当前窗口浏览器高度。 2、滚动到底部时出现正在加载数据动画,到数据加载完成时动画消失。 3、自动追加内容。这个要用到ajax。 代码实现如下: HTML、JavaScript ...

空空如也

空空如也

1 2 3 4
收藏数 73
精华内容 29
关键字:

获取浏览器当前页面的滚动条高度