注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡淡De影痕的博客

将来的你一定会感激现在拼命的自己。

 
 
 

日志

 
 
 
 

滚动条相关属性小结  

2014-09-23 13:46:11|  分类: JS初心向小结 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
今天总结一下滚动条相关的一些属性~

一.页面中某元素的滚动条(咱们以div为例)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
margin: 100px auto;
overflow: auto;
width: 300px;
border: 10px #000 solid;
height: 400px;
}
.inner{
height: 1000px;
}
.box{
height: 1000px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner" class="inner">

</div>
</div>
</body>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
outer.scrollTop = 300;
console.log("outer的scrollTop是"+outer.scrollTop);
console.log("outer的scrollHeight是"+outer.scrollHeight);
console.log("outer的clientHeight是"+outer.clientHeight);
console.log("outer的offsetHeight是"+outer.offsetHeight);
inner.innerHTML =
"outer的scrollTop是"+outer.scrollTop+"<br/>"+
"outer的scrollHeight是"+outer.scrollHeight+"<br/>"+
"outer的clientHeight是"+outer.clientHeight+"<br/>"+
"outer的offsetHeight是"+outer.offsetHeight+"<br/>";
</script>
</html>

滚动条相关属性小结 - 淡淡De影痕 - 淡淡De影痕的博客
 这是一个宽300px,高400px,边框10px的div。以高度为例~
(1)scrollTop:滚动条距顶部的距离。
(2)scrollHeight:滚动条的高度,父元素中内容的高度。
(3)clientHeight:可视区域的高度。
(4)offsetHeight:可视区域的高度+边框(注意:div的offsetHeight和body的offsetHeight不同
页面中元素的滚动条兼容性很好可以直接用~

二.body的滚动条属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
margin: 100px auto;
overflow: auto;
width: 300px;
border: 10px #000 solid;
height: 400px;
}
.inner{
height: 1000px;
}
.box{
height: 1000px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner" class="inner">

</div>
</div>
<div class="box"></div>
</body>
<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
console.log("body的scrollHeight是"+document.documentElement.scrollHeight);
console.log("body的scrollWidth是"+document.documentElement.scrollWidth);
console.log("body的scrollTop是"+document.documentElement.scrollTop);
console.log("body的scrollLeft是"+document.documentElement.scrollLeft);
console.log("body的clientHeight是"+document.documentElement.clientHeight);
console.log("body的offsetHeight是"+document.documentElement.offsetHeight);
inner.innerHTML =
"body的scrollHeight是"+document.documentElement.scrollHeight+"<br/>"+
"body的scrollWidth是"+document.documentElement.scrollWidth+"<br/>"+
"body的scrollTop是"+document.documentElement.scrollTop+"<br/>"+
"body的scrollLeft是"+document.documentElement.scrollLeft+"<br/>"+
"body的clientHeight是"+document.documentElement.clientHeight+"<br/>"+
"body的offsetHeight是"+document.documentElement.offsetHeight+"<br/>";

</script>
</html>

滚动条相关属性小结 - 淡淡De影痕 - 淡淡De影痕的博客
 同样以高度为例~
(1)document.documentElement.scrollHeight:body滚动条的高度,页面内容的高度。
(2)document.documentElement.scrollWidth:body横向滚动条的宽度,body的宽度。
(3)document.documentElement.scrollTop:body滚动条距顶部的距离(这里有兼容问题
(4)document.documentElement.scrollLeft:body滚动条距左侧的距离(同样有兼容问题
(5)document.documentElement.clientHeight:body的可视高度。
(6)document.documentElement.offsetHeight:同scrollHeight。

三.兼容问题及其他属性
(1)body的scrollTop和scrollLeft。
这里以scrollTop为例,scrollLeft同理。
写法一:document.documentElement.scrollTop (兼容ie,firefox
写法二:document.body.scrollTop(兼容Chrome,Safari

(2)window.screenTop和window.screenLeft
窗口距离屏幕顶部和屏幕左侧的距离(兼容Chrome,Safari,ie

(3)window.screenY和window.screenX
窗口距离屏幕顶部和屏幕左侧的距离(兼容Chrome,Safari,firefox)

(4)window.screen.height和window.screen.width
当前窗口的屏幕分辨率

欢迎大家交流指正~淡淡De影痕
  评论这张
 
阅读(177)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018