1、滚动宽高
scrollHeight：表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分。
scrollWidth：表示元素的总宽度，包括由于溢出而无法展示在网页的不可见部分。
[注意]IE7-浏览器返回值是不准确的
（1）没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等
scrollWidth和clientWidth的宽度等于width+padding(左右)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid blac
}
</style>
</head>
<body>
<div id ="box"> </div>
<script type="text/javascript">
var box=document.getElementById("box");
console.log(box.scrollHeight,box.scrollWidth); //120 120
console.log(box.clientHeight,box.clientWidth); //120 120
</script>
</body>
</html>
（2）存在滚动条时，但元素设置宽高大于等于元素内容宽高时，scroll和client属性的结果相等
scrollWidth和clientWidth的宽度等于width+padding(左右)-滚动条的宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div id ="box">
内容<br>内容<br>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
console.log(box.scrollHeight,box.scrollWidth); //103 103
console.log(box.clientHeight,box.clientWidth); //103 103
</script>
</body>
</html>
（3）存在滚动条，但元素设置宽高小于元素内容宽高，即存在内容溢出的情况时，scroll属性大于client属性
[注意]scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
padding: 10px;
margin: 10px;
border: 1px solid black;
overflow: scroll;
line-height: 200px;
}
</style>
</head>
<body>
<div id ="box">
内容<br>内容<br>
</div>
<script type="text/javascript">
var box=document.getElementById("box");
console.log(box.scrollHeight,box.scrollWidth); //420 103
console.log(box.clientHeight,box.clientWidth); //103 103
</script>
</body>
</html>
2、页面尺寸
document.documentElement.clientHeight表示页面的可视区域的尺寸
document.documentElement.scrollHeight表示html元素内容的实际尺寸。
响应式字体大小的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body{
font-size: 50px;
}
.box{
font-size: 1rem;
}
</style>
</head>
<body>
<div class="box">hello</div>
<script>
window.onresize = function () {
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = 50 * w / 1366 + "px";
}
</script>
</body>
</html>
3、滚动长度。
（1）scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
（2）scrollLeft属性表示被隐藏在内容区域左侧的像素数。元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度
当滚动条到页面底部时，符合：scrollHeight==scrollTop+clientHeight
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
内容</div>
<button id='btn1'>点击</button>
<div id="result"></div>
<script>
btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}
</script>
<body>
<div id="test" style="width: 100px;height: 100px;padding: 10px;margin: 10px;border: 1px solid black;overflow:scroll;font-size:20px;line-height:200px;">
内容</div>
<button id='btn1'>向下滚动</button>
<button id='btn2'>向上滚动</button>
<script>
btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}
</script>
</body>
响应式网站导航条滑动一定高度加个背景
<script>
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
if (scrollTop >= 500) {
$("nav").addClass("scrollStyle");
} else {
$("nav").removeClass("scrollStyle");
}
});
</script>
4、页面滚动
通过document.documentElement.scrollTop和scrollLeft可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的
<body style="height:1000px">
<button id='btn1' style="position:fixed;top:0;">点击</button>
<div id="result" style="position:fixed;top:30px;"></div>
<script>
btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}
</script>
</body>
所以，页面的滚动高度兼容写法是:
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop
回到顶部
<body style="height:1000px">
<button id='btn' style="position:fixed">回到顶部</button>
<script>
function scrollTop(){
if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;
</script>
</body>
网友评论