您的位置：首页 > Web前端 > JQuery

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

2017-05-18 23:46 961 查看


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



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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航