js/jQuery的寬高比較
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>