scrollWidth, scrollHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
</body>
<script>
// 1.scrollHeight表示元素的总高度, 包含由于溢出而无法在网页上的不可见部分
// 2.scrollWidth表示元素的总宽度, 包含由于溢出而无法在网页上的不可见部分
var box = document.getElementById('box');
// 1.无滚动条的时候, scrollHeight跟clientHeight属性结果是相等的
console.log(box.scrollHeight);
console.log(box.clientHeight);
// 2.有滚动条的时候, scrollHeight是内容的真实高度, clientHeight是展示部分的高度
console.log(box.scrollHeight);
console.log(box.clientHeight);
</script>
</html>
scrollTop scrollLeft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<button id="btn1">点击</button>
</body>
<script>
var box = document.getElementById('box');
var btn1 = document.getElementById('btn1');
// 1.scrollTop 元素被卷起的高度
box.onscroll = function() {
console.log(box.scrollTop, box.clientHeight, box.scrollHeight);
// 当滚动条滚到内容底部时, 符合以下公式
// scrollHeight = clientHeight + scorllTop;
}
// 2.scrollTop是可读写的
box.scrollTop = 20;
btn1.onclick = function() {
box.scrollTop += 10;
}
</script>
</html>
回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid #000000;
padding: 10px;
margin: 10px;
overflow: scroll;
}
#btn1 {
position: fixed;
top: 200px;
left: 30px;
}
</style>
</head>
<body style="height: 2000px">
<div id="box">
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
</div>
<button id="btn1">回到顶部</button>
</body>
<script>
window.onscroll = function() {
// 获取页面滚动
console.log(document.documentElement.scrollTop); // safari不兼容
console.log(document.body.scrollTop); // chorme不兼容
// 兼容代码
var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var btn = document.getElementById('btn1');
btn.onclick = scrollTop;
function scrollTop() {
// 页面滚动到最顶部
if (docScrollTop) {
// document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
// 简便写法
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
}
</script>
</html>
