元素的client属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: aqua;
border: solid 2px blue;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var box=document.getElementById('box');
console.log(box.clientWidth,box.clientHeight);
console.log(box.clientLeft,box.clientTop);
</script>
</body>
</html>
元素的scroll属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: #00FFFF;
overflow: scroll;
word-break: keep-all;
}
</style>
</head>
<body>
<div id="box">
fjkgfkjkgfkgjfkgjkfjgkjfkj
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付今改进股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付今改进股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
绝代风华东风股份借古讽今改进和付今改进绝代风华东风股份借古讽今改进和付绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可绝代风华东风股份借古讽今改进和付加工费即可
</div>
<script type="text/javascript">
var box=document.getElementById('box');
box.onscroll=function (e) {
console.log(box.scrollWidth,box.scrollHeight);
}
</script>
</body>
</html>
window属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 500px;
height: 1000px;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
box.onclick=function (e) {
var w=window;
console.log(w.pageXOffset,w.pageYOffset);
console.log(w.screenLeft,w.screenTop);
console.log(w.screen.width,w.screen.height);
console.log(w.innerWidth,w.innerHeight);
}
</script>
</html>
案例:返回顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
height: 600px;
background-color: #00FFFF;
}
#main{
height: 800px;
background-color: pink;
}
#foot{
height: 800px;
background-color: blueviolet;
}
#returnTop{
width: 80px;
height: 80px;
background-color: coral;
text-align: center;
position: fixed;
left: 50px;
bottom: 100px;
display: none;
}
a{
text-decoration: none;
font-size: 30px;
color: white;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="main"></div>
<div id="foot"></div>
<div id="returnTop">
<a href="javascript:void(0)">返回顶部</a>
</div>
<script type="text/javascript">
var returnTop=document.getElementById('returnTop');
var myTop=document.getElementById('top');
window.onscroll=function () {
if(window.pageYOffset>myTop.offsetHeight){
returnTop.style.display='block';
}else{
returnTop.style.display='none';
}
}
returnTop.onclick=function () {
window.scroll(0,0);
}
</script>
</body>
</html>
案例:跳楼机
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.one{
height: 1000px;
background-color: #8A2BE2;
}
div{
text-align: center;
}
#top1{
height: 800px;
background-color: #00FFFF;
}
#top2{
height: 800px;
background-color: #FF7F50;
}
#top3{
height: 800px;
background-color: bisque
}
#top4{
height: 800px;
background-color: brown;
}
#top5{
height: 800px;
background-color: cornflowerblue;
}
#side_bar{
width: 100px;
position: fixed;
left: 50px;
bottom: 100px;
display: none;
}
.item{
width: 100px;
height: 30px;
line-height: 30px;
border: solid 1px gray;
}
.first_color{
background-color: orange;
}
</style>
</head>
<body>
<div class="one"></div>
<div id='top1'>top1</div>
<div id='top2'>top2</div>
<div id='top3'>top3</div>
<div id='top4'>top4</div>
<div id='top5'>top5</div>
<div id="side_bar">
<div class="item first_color">top1</div>
<div class="item">top2</div>
<div class="item">top3</div>
<div class="item">top4</div>
<div class="item">top5</div>
</div>
<script type="text/javascript">
var sideBar=document.getElementById('side_bar');
var top1=document.getElementById('top1');
var top2=document.getElementById('top2');
var top3=document.getElementById('top3');
var top4=document.getElementById('top4');
var top5=document.getElementById('top5');
var items=document.getElementsByClassName('item');
document.onscroll=function (e) {
if(window.pageYOffset>=top1.offsetTop){
sideBar.style.display='block';
}else{
sideBar.style.display='none';
}
if(window.pageYOffset>=top1.offsetTop && window.pageYOffset<top2.offsetTop){
initColor(items);
items[0].style.backgroundColor='orange';
}else if(window.pageYOffset>=top2.offsetTop && window.pageYOffset<top3.offsetTop){
initColor(items);
items[1].style.backgroundColor='orange';
}else if(window.pageYOffset>=top3.offsetTop && window.pageYOffset<top4.offsetTop){
initColor(items);
items[2].style.backgroundColor='orange';
}else if(window.pageYOffset>=top4.offsetTop && window.pageYOffset<top5.offsetTop){
initColor(items);
items[3].style.backgroundColor='orange';
}else if(window.pageYOffset>=top5.offsetTop && window.pageYOffset<=(top5.offsetTop+top5.offsetHeight)){
initColor(items);
items[4].style.backgroundColor='orange';
}else{
sideBar.style.display='none';
}
}
function initColor (arr) {
for (var i = 0; i < arr.length; i++) {
arr[i].style.backgroundColor='fuchsia';
}
}
</script>
</body>
</html>