坐标分类

  1. 文档坐标

  2. 窗口坐标

scroll

Element.scrollTop: 设置或获得一个元素距离他容器顶部的像素距离, 当一个元素的容器没有产生垂直方向的滚动条, 则他的 scrollTop 的值默认为 0

获得滚动距离
var intElementScrollTop = someElement.scrollTop;

scrollTop 可以被设置为任何整数, 但是一下情况会报错:
1. 如果一个元素不能被滚动(没有溢出容器或本身不可滚动)的时候设置其 scrollTop 为 0;

  1. 设置 scrollTop 的值小于 0, scrollTop 被设为 0

  2. 如果设置了超出这个容器可以滚动的值, scrollTop 会被设为最大值

其实就是溢出距离

Element.scrollHeight: 计量元素内容高度的只读属性, 包括 overflow 样式属性导致的视图中不可见内容

没有垂直滚动条的情况下, scrollHeight 值与元素视图填充所有内容所需要的最小值 clientHeight 相同, 包括元素的 padding, 但不包括 margin

其实就是溢出元素的本身高度

!()[https://developer.mozilla.org/@api/deki/files/840/=ScrollHeight.png]

判断元素是否滚动到底部

element.scrollHeight - element.scrollTop === element.clientHeight

clientTop

Element.clientTop: 一个元素顶部边框的宽度, 不包括顶部外边距或内边距, 只读属性

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 来计算

其实就是可视区域高度

mouseEvent.clientX: 只读属性, 事件发生时应用客户端区域的水平坐标, 与页面无关

mouseEvent.x 是 mouseEvent.clientX 的别名

window

window.innerHeight: 浏览器窗口的视口( viewport ) 高度, 如果存在滚动条, 则要包括在内, 只读属性

window.outerHeight: 整个浏览器窗口的高度

offset

mouseEvent.offsetX: read-only property provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node

page

event.PageX: read-only property returns the horizontal coordinate of the event relative to the whole document

文档坐标

screen

mouseEvent.screenX: read-only property provides the horizontal coordinate of the mouse pointer in the global(screen) coordinate.