1、window表示当前浏览器打开的窗口,可省略
document对象是window对象的一部分,浏览器的html文档成为document对象
document.location===window.location
2、与client相关的
1)、(clientWidth和clientHeight)
假如无padding无滚动
clientWidth=style.width
假如有padding无滚动
clientWidth=style.width+2*pading
假如有padding有滚动
clientWidth=style.width+2*pading-滚动轴宽度
2)、(clientTop和clientLeft)
clientTop=border-top的border-width
3、与offset相关的
1)、offsetWidth和offsetHeight
假如无padding无滚动无border
offsetWidth=clientWidth=style.width
假如有padding无滚动有border
offsetWidth=style.width+2*padding+border*2
offsetWidth=clientWidth+border*2
假如有padding有滚动有border
offsetWidth=style.width+2*padding+border*2
offsetWidth=clientWidth+border*2+滚动轴宽度
2)offsetTop和offsetLeft
有兼容性问题
在ie8及以上和谷歌中offsetTop=margin-top+父级的padding+父级的border+父级的margin-top
4、与scroll相关的
1)srcollWidth和scrollHeight
给定宽高小于浏览器窗口
scrollWidth=浏览器窗口的宽度
给定宽度大于浏览器窗口
scrollWidth=scrollWidth的高度+padding*2+margin*2+border*2
2)scrollLeft和scrollTop
是可读写的,指的是当前元素内容超过其宽度的时候,元素被卷起的高度和宽度
在不同浏览器实现的javascript方案
var w=document.documentElement.clientWidth||document.body.clientWidth
var h=document.documentElement.clientHeight||document.body.clientHeight
javascript案例demo
demo1 到了指定的地方再加载函数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>到了指定位置加载动画</title>
<style>
#mydiv{width: 400px;height: 200px;background:red;margin-top:1500px}
@-webkit-keyframes fadeInLeft {
0%{
opacity: 0;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
-webkit-transform:none ;
transform:none ;
}
}
@keyframes fadeInLeft {
0%{
opacity: 0;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
-webkit-transform:none ;
transform:none ;
}
}
.fadeInLeft{
-webkit-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
window.onscroll=function(){
var showId=document.getElementById('mydiv')
var client=document.documentElement.clientTop||document.body.clientTop||window.innerHeight;
var divTop=showId.getBoundingClientRect().top
if(divTop<=client){
showId.classList.add('fadeInLeft')
}else{
showId.classList.remove('fadeInLeft')
}
}
</script>
</body>
</html>
demo2 网页滚动到底部或顶部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滚动到底部或顶部</title>
<style>
body{margin: 0;padding: 0}
#mydiv{width: 400px;height: 200px;background:red;margin-top:1500px}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
window.onscroll=function(){
var clients=window.innerHeight||dcument.documentElement.clientHeight||document.body.clientHeight
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop
var wholeHeight=document.documentElement.scrollHeight
if(clients+scrollTop>=wholeHeight){
alert('我已经到底部了')
}
if(scrollTop==0){
alert('我已经到顶部了')
}
}
</script>
</body>
</html>
demo3 div滚动到底部或顶部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>div滚动到底部或顶部</title>
<style>
body{margin: 0;padding: 0}
#mydiv{width: 400px;height: 200px;background:red;overflow-y: scroll;padding: 10px}
</style>
</head>
<body>
<div id="mydiv">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<script>
var divId=document.getElementById('mydiv')
divId.onscroll=function(){
var clients=divId.clientHeight
var scrollTop=divId.scrollTop
var wholeHeight=divId.scrollHeight
console.log(clients+"+"+scrollTop+'+'+wholeHeight)
if(clients+scrollTop>=wholeHeight){
alert('我已经到底部了')
}
if(scrollTop==0){
alert('我已经到顶部了')
}
}
</script>
</body>
</html>
jquery 案例
demo1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>到了指定位置加载动画</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#mydiv{width: 400px;height: 200px;background:red;margin-top:1500px}
@-webkit-keyframes fadeInLeft {
0%{
opacity: 0;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
-webkit-transform:none ;
transform:none ;
}
}
@keyframes fadeInLeft {
0%{
opacity: 0;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}
100%{
opacity: 1;
-webkit-transform:none ;
transform:none ;
}
}
.fadeInLeft{
-webkit-animation: fadeInLeft 2s;
animation: fadeInLeft 2s;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
$(window).scroll(function(){
var ks_area=$(window).height()
var scrollHeight=$(window).scrollTop()
var divTop=$('#mydiv').offset().top
if(ks_area+scrollHeight>=divTop){
$('#mydiv').addClass('fadeInLeft')
}else{
$('#mydiv').removeClass('fadeInLeft')
}
})
</script>
</body>
</html>
demo2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery滚动到头部或底部加载</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div style="height: 3000px;width: 100%"></div>
<script>
$(window).scroll(function(){
var ks_area=$(window).height()
var scrollHeight=$(window).scrollTop()
var wholeHeight=$(document).height()
if(ks_area+scrollHeight>=wholeHeight){
alert('滚动到底部了')
}
if(scrollHeight==0){
alert('滚动到顶部了')
}
})
</script>
</body>
</html>