JS window的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 3000px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">box</div>
<script>
document.body.onclick = function() {
// 只读--获取被卷进去内容与窗口左上角的距离
console.log(window.pageXOffset);
console.log(window.pageYOffset);
// 获取的是浏览器距离屏幕左上角的距离
console.log(window.screenTop);
console.log(window.screenLeft);
// 获取电脑屏幕的宽度和高度
console.log(window.screen.width);
console.log(window.screen.height);
// - window.innerWidth:返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在,则这个属性将包括它的宽度。(只读)
// - window.innerHeight:返回以像素为单位的窗口的内部高度。如果有水平滚动条,也包括滚动条高度。(只读)
console.log(window.innerWidth);
console.log(window.innerHeight);
}
</script>
</body>
</html>