欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

jquery如何获取元素的滚动高度 有大用

shiping1 的头像
星期四, 2015-12-03 11:39 — shiping1
参考如下：jquery的滚动高度
获取览器显示区域的高度 ： $(window).height(); 
获取浏览器显示区域的宽度 ：$(window).width();
获取页面的文档高度 ：$(document).height();
获取页面的文档宽度 ：$(document).width();
获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();
获取总高度 ：没有$(document).scrollHeight(); IE  document.documentElement.scrollHeight; 非IE document.body.scrollHeight;
获取总宽度 ：没有$(document).scrollWidth();  IE  document.documentElement.scrollWidth; 非IE document.body.scrollWidth;

javascript的滚动高度
这个是兼容的  我公司的项目就用的这个获取的。
 
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事件  不知道能不能用  
  
来自 http://zhidao.baidu.com/link?url=97N3l5LjgiamfNCJJMDExWzzGTq3r6vLi4_hhnjdLBTavb3NBRg9TRZHAcn_Jxar7ls7uc25gghkS3DwJY_bt_


获取浏览器显示区域（可视区域）的高度 ： 
$(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; } };
来自 http://www.cnblogs.com/sntetwt/p/3823592.html

//jq获取浏览器高宽
<script type="text/javascript"> 
$(document).ready(function(){ 
alert($(window).height()); //浏览器时下窗口可视区域高度 
alert($(document).height()); //浏览器时下窗口文档的高度 
alert($(document.body).height());//浏览器时下窗口文档body的高度 
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin 
alert($(window).width()); //浏览器时下窗口可视区域宽度 
alert($(document).width());//浏览器时下窗口文档对于象宽度 
alert($(document.body).width());//浏览器时下窗口文档body的高度 
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin 
//也可以这样
$("当前容器").height();//获取某个元素的高度
$("当前容器").width();//获取某个元素的宽度
}) 
</script>

来自 http://zhidao.baidu.com/question/1175788494606408099.html

<!DOCTYPE html>
<html>
    <head>
        <title>js中的各种高度</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            body{
                margin: 8px;
            }
            div{
                background: grey;
            }
        </style>
    </head>
    <body>
        <div>这是一个div</div>
        <p>1111111111111111</p>
        <div style="width:400;height: 400px;">this is a box!</div>
        <p>1111111111111111</p>
        <div id="div1" style="color:fff;background: gold;overflow: scroll;width: 300px;height: 300px;margin: auto;" >
          111111111111111111111111111111111111111111111111111111111111
        </div>
        <div style="width:400;height: 400px;">this is a box!</div>
        <script>
            alert("网页可见区域宽：" + document.body.clientWidth);
            alert("网页可见区域高：" + document.body.clientHeight);
            alert("网页可见区域高 (包括边线的宽)：" + document.body.offsetWidth);
            alert("网页可见区域高 (包括边线的高)：" + document.body.offsetHeight);
            alert("网页正文全文宽：" + document.body.scrollWidth);
            alert("网页正文全文高：" + document.body.scrollHeight);
            alert("网页被卷去的高：" + document.body.scrollTop);
            alert("网页被卷去的左：" + document.body.scrollLeft);
            alert("网页正文部分上：" + window.screenTop);
            alert("网页正文部分左：" + window.screenLeft);
            alert("屏幕分辨率的高：" + window.screen.height);
            alert("屏幕分辨率的宽：" + window.screen.width);
            alert("屏幕可用工作区高度：" + window.screen.availHeight);
            alert("屏幕可用工作区宽度：" +  window.screen.availWidth);
        </script>
    </body>
</html>
来自 http://www.w3cfuns.com/article-5597211-1-1.html


JQuery Div scrollTop ScrollHeight

 

 jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。

    我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。

    一、滚动条有关属性的正确理解：

    假设有以下Html代码：

<div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div style="height:750px;">
      </div>
</div>

 

        由于内部的div标签高度比外部的长，并且外部的div允许自动出现垂直滚动条，所以用浏览器打开后，可以看到垂直滚动条。滚动条向下拖动一段距离，看到的页面效果如下（右部的a、b是我抓图后，用PS标出来的）：

    那么，这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢？
    有人说，scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实，都不对。
    其实，图中标出的a、b，对我们编程写js代码没有任何具体意义，它仅仅具有象征意义。
    实际上，在js代码里，滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”（b），而是表示滚动条需要滚动的高度，即内部div的高度750px。而scrollTop表示滚动条（一个点）当前的位置在750px里占了多少，不是图中标出的a。
    这时，我们很叹服Windows的设计者，滚动条设计的如此形象美妙，欺骗了多少头脑简单的鼠标操作员。a和b的距离分别标识滚动条滚动了和需要滚动的距离，它们之间分别有一个对应的关系，但这些不是我们这些开发应用程序的程序员考虑的，是设计操作系统GUI图形接口的程序员考虑的。

2判断垂直滚动条是否到达底部
    弄明白了以上的概念，编码其实就比较简单了， 以下是示例代码：

复制代码
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>下拉滚动条滚到底部了吗？</title>
      <script language="javascript" src="jquery-1.10.2.js"></script>
      <script language="javascript">
      $(document).ready(function (){
        var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
        var nScrollTop = 0;   //滚动到的当前位置
        var nDivHight = $("#div1").height();

        $("#div1").scroll(function(){
          nScrollHight = $(this)[0].scrollHeight;
          nScrollTop = $(this)[0].scrollTop;
          if(nScrollTop + nDivHight >= nScrollHight)
            alert("滚动条到底部了");
          });
      });
      </script>
    <body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
      <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
    </div>
    </body>
    </html>
复制代码

 

    代码解说：
    内部div高度为750，外部div高度为500，所以垂直滚动条需要滚动750-500=250的距离，就会到达底部，参见语句nScrollTop + nDivHight >= nScrollHight。
    程序中，在外部div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。
    本示例判断的是没有水平滚动条的情况，在有水平滚动条时，情况会有细小的变化，所以nScrollTop + nDivHight >= nScrollHight语句中，需要用“>=”比较运算符，而没有水平滚动条的时候，等号“=”就足够了。大家可以实际测试一下。还可以判断水平滚动条是否滚动到头了。

来自 http://www.cnblogs.com/dingyingsi/archive/2013/09/24/3337813.html
普通分类: 
jquery
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2