onscroll()
用鼠标滚轮,滚动网页的时候,会触发window.onscroll()方法
<!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>
body{
height: 1000px;
}
</style>
</head>
<body>
<script>
window.onscroll = function(){
console.log("你动鼠标滚轮了");
}
</script>
</body>
</html>
ScrollWidth 和 scrollHeight
获取盒子的宽高。调用者为节点元素;不包括 border和margin
- scrollWidth = width + padding
- scrollHeight = height + padding
注意:
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>
*{
margin: 0;
padding: 0;
}
.d1{
width: 100px;
height: 100px;
padding: 20px;
margin: 10px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">有一说一,这件事大家懂的都懂,不懂的,说了你也不明白,不如不说。你们也别来问我怎么了,利益牵扯太大,说了对你们也没什么好处,当不知道就行了,其余的我只能说这里面水很深,牵扯到很多大人物,详细资料你们自己找是很难的,网上大部分都被删干净了,所以我只能说懂的都懂,不懂的也没办法</div>
</div>
<script>
var d1 = document.querySelector(".d1");
console.log(d1.scrollWidth);
//140
console.log(d1.scrollHeight);
//526
</script>
</body>
</html>
scrollTop 和 scrollLeft
网页被卷去的头部和左边的部分。
比如说,一个网页往上滚动的时候,上面的部分自然被浏览器遮挡了,遮挡的高度就是scrollTop。
scrollTop 这个属性的写法要注意兼容性
兼容性写法:
window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
将 scrollTop 和 scrollLeft封装为 json
将 scrollTop 和 scrollLeft封装为一个方法,名叫scroll(),返回值为 json
json里的键为 top 和 left。以后就直接调用json.top 和json.left
获取 html 文档的方法
获取title、body、head、html标签的方法如下
- document.title 文档标题
- document.head 文档的头标签
- document.body 文档的body标签
- document.documentElement 文档的html标签
scrollBy()
scrollBy(xnum,ynum)
// xnum : 把文档向右滚动的像素数(必需)
// ynum : 把文档向下滚动的像素数(必需)
scrollTo()
scrollTo(xpos,ypos)
// xpos : 要在窗口文档显示区左上角显示的文档的 x 坐标(必需)
// ypos : 要在窗口文档显示区左上角显示的文档的 y 坐标(必需)