# 拖拽与屏幕
# 页面上各种宽度、位置、滚动
window.innerWidth/window.outerWidth 窗口的外层的宽度/内层宽度
window.screen.availWidth(可视化的宽度)
window.screen.availHeight(可视化的高度)
注意
# 点击event
event.pageX event.pageY
- 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。(如有滚动条，需要加滚动条值！在没滚动条的情况下等于clientX/clientY)这2个属性不是标准属性，但得到了广泛支持。 IE8以下事件中没有这2个属性。
event.clientX event.clientY
- 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.offsetX event.offsetY
- 鼠标相对于事件源元素（srcElement）的X,Y坐标。
event.screenX event.screenY
- 鼠标相对于用户显示屏左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
# 点击的盒子
clientWidth clientHeight
- 该属性指的是元素的 可视部分 宽度和高度
- 包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0
clientTop clientLeft
- 这一对属性是用来读取元素的border的宽度和高度的
clientTop = border-top 的 border-width
clientLeft = border-left 的 border-width
offsetWidth offsetHeight
- 这一对属性指的是元素的border+padding+content的宽度和高度
- 包括padding、border、水平滚动条
offsetLeft offsetTop
- 获取当前对象到其上级层左边/上边的距离获取当前对象到其上级层顶部的距离，他们的参照物是offsetParent
scrollWidth scrollHeight
- 无滚动轴时：scrollWidth = clientWhidth = style.width + style.padding×2 有滚动轴时：scrollWidth = 实际内容的宽度 + padding×2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
*{margin:0;padding:0}
#k1{
width:300px;
height:2000px;
background: #61DAFB;
}
#k2{
position: relative;
width:300px;
height:300px;
background: #FB929E;
top:100px;
left:120px;
}
#k3{
position:relative;
width:100px;
height:100px;
background: #282C34;
top:50px;
left:20px;
overflow-y: auto;
padding:5px;
border:5px solid red;
}
p{
height:50px;
color:#61DAFB
}
</style>
</head>
<body>
<div id="k1"></div>
<div id="k2">
<div id="k3">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var k1=document.getElementById("k1")||0;
var k2=document.getElementById("k2");
var k3=document.getElementById("k3");
k3.onclick=function(ev){
var e=ev||window.event;
var scrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
// console.log(e.clientX);
// console.log(e.clientY)
// // console.log(e.pageX)
// // console.log(e.pageY)
// // console.log(scrollTop)
// console.log(e.screenX)
// console.log(e.screenY)
//console.log(e.offsetX)
// console.log(e.offsetY)
// console.log(e.screenX-e.clientX)
// console.log(k3.offsetWidth)
// console.log(k3.offsetHeight)
// // console.log(k3.offsetTop)
// console.log(k3.clientWidth)
// console.log(k3.clientHeight)
// console.log(document.body.scrollHeight)
// console.log(document.documentElement.scrollHeight)
// console.log(window.innerWidth)
// k3.style.width="400px";
}
</script>