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

最新推荐文章于 2024-05-29 16:27:42 发布

Gavin__Xie

最新推荐文章于 2024-05-29 16:27:42 发布

阅读量9.8k

点赞数 2

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>

Gavin__Xie

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS及jQuery获取各种宽度、高度的简单介绍以及判断滚动条滚动到底部事件

JS获取各种宽度、高度的简单介绍：JS获取各种宽度、高度的简单介绍：scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获
复制链接

扫一扫