欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件

程序员文章站 2022-05-23 19:53:23
...

JS获取各种宽度、高度的简单介绍：

JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件

JS获取各种宽度、高度的简单介绍：

scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 
scrollWidth:获取对象的滚动宽度 
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 
event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标 
document.documentElement.scrollTop 垂直方向滚动的值 
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding 
clientHeight = height + padding 
offsetWidth = width + padding + border 
offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border 
clientHeight = height - border 
offsetWidth = width 
offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetWidth (width+padding+border)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。获取对象可见内容的宽度，不包括滚动条，不包括边框；

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

offsetWidth 与 style.width 的区别

一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

二、offsetTop 只读，而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

jQuery获取各种宽度、高度的简单介绍 



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
 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
$('#outer-div')[0].scrollHeight
//获取div的实际高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度








判断滚动条滚动到底部：



js判断:判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。







scrollTop为滚动条在Y轴上的滚动距离。



clientHeight为内容可视区域的高度。



scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。



从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

jquery实现判断滚动条滚动到底部：





<!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>  
  <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  <title>下拉滚动条滚到底部了吗？</title>  
  <script language="javascript" src="jQuery.js"></script>  
  <script language="javascript">  
  $(document).ready(function (){  
    $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);  
    $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);  
  
    $("#outer-div").scroll(function(){  
      $('#scroll-to-bottom-msg').html('');  
        $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);  
        $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);  
  
      if($("#outer-div")[0].scrollTop >= ($("#outer-div")[0].scrollHeight - $("#outer-div").height()))   
        $('#scroll-to-bottom-msg').html('滚动到DIV底部了');  
      });  
  });  
  </script>  
<body>  
    Scroll Top : <span id="scroll-top-msg">0</span> |  
    Scroll Height : <span id="scroll-height-msg">0</span> <br/>  
    <span id="scroll-to-bottom-msg"></span>  
    <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;">  
      <div style="height:750px;background:#aea;width:600px;margin:0 auto;">  
      </div>  
    </div>  
</body>  
</html>  
当然也可以使用百分比判断滚动条离底部距离




<!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>  
  <meta http-equiv="content-type" content="text/html;charset=utf-8">  
  <title>下拉滚动条滚到底部了吗？</title>  
  <script language="javascript" src="jQuery.js"></script>  
  <script language="javascript">  
  $(document).ready(function (){  
    $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);  
    $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);  
  
    $("#outer-div").scroll(function(){  
      $('#scroll-to-bottom-msg').html('');  
        $('#scroll-top-msg').html($("#outer-div")[0].scrollTop);  
        $('#scroll-height-msg').html($("#outer-div")[0].scrollHeight);  
  
      if($("#outer-div")[0].scrollTop / （($("#outer-div")[0].scrollHeight - $("#outer-div").height())）== 0.95 )   //在滚动条距离底端5%以内
        $('#scroll-to-bottom-msg').html('滚动到DIV底部了');  
      });  
  });  
  </script>  
<body>  
    Scroll Top : <span id="scroll-top-msg">0</span> |  
    Scroll Height : <span id="scroll-height-msg">0</span> <br/>  
    <span id="scroll-to-bottom-msg"></span>  
    <div id="outer-div" style="overflow-y:auto; overflow-x:hidden; width:800px;height:500px;background:gray;">  
      <div style="height:750px;background:#aea;width:600px;margin:0 auto;">  
      </div>  
    </div>  
</body>  
</html>  














					

																				

						

							上一篇：							
								百度：已将人工智能用于外卖							
						

						

							下一篇：							
								IDC：2013年企业云计算业务十大预测							
						

					

															

						

							推荐阅读