JavaScript 坐标系统

[Calerme]

Client

表示元素内部可视区域的宽高。

Element.clientWidth

表示元素的内部宽度，包括内边距，但不包括垂垂直滚动条、边框和外边距。

Element.clientHeight

表示元素的内部高度，包括内边距，但不包括水平滚动条、边框、外边距。

Element.clientLeft

border-left-width 的值

Element.clientTop

border-top-width 的值

Offset

返回一个元素的布局宽高。

HTMLElement.offsetWidth

返回一个元素的布局宽度。（包括边框，内边距，wdith，垂直滚动条宽度）

border-left-width + padding-left-width + width + padding-right-width + 垂直滚动条Width + border-right-width

HTMLElement.offsetHeight

返回一个元素的布局高度。（包括边框、内边距、height，水平滚动条）

HTMLElement.offsetParent

返回距离元素最近的包含该元素的定位元素。如果没有定位元素，则 offsetParent 为最近的 table，table cell 或根元素（标准模式下为 html；quirks 模式模式下为 body），元素的 style.display 设置为 none 时，offsetParent 返回 null。

HTMLElement.offsetLeft 和 HTMLElement.offsetTop 都是相对于 HTMLElement.offsetParent 进行计算的。

HTMLElement.offsetLeft

返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

HTMLElement.offsetTop

返回当前元素相对于其 offsetParent 元素顶部的距离。

Scroll

返回元素的内容区域或元素本身宽高中更多大的那个值，若元素的宽度大于内容的区域，scroll 宽高的值要大于 client 宽高的值。

document.body.scrollWidth 与 body.scrollHeight 的最小值与其它 Element 元素略有不同。document.body 的最小值分别为 window.innerWidth 与 window.innerHeight。

Element.scrollWidth

元素的scrollWidth只读属性以px为单位返回元素的内容区域宽度或元素的本身的宽度中更大的那个值。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth的值要大于clientWidth。

Element.scrollHeight

Element.scrollHeight 包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

Element.scrollLeft & Element.scrollTop

这两个值是可读写的。

它们表示元素被水平或垂直滚动的像素数。

将它们的值被设置为小于 0 或大于最大可滚动像素值时，会被重置为 0 和最大可滚动值。

window 宽高值

• window.innerWidth 视口宽度，包括垂直滚动条
• window.innerHeight
• window.outerWidth 浏览器窗口宽度
• window.outerHeight

window.screen 显示器相关属性

• window.screen.width 显示器宽度
• window.screen.height
• window.screen.availWidth 显示器可用宽度（一般为减去 docker 的宽度）
• window.screen.availHeight

window 定位值

• window.screenX 距离显示器左边的距离
• window.screenY 距离显示器顶部的距离

Event 对象的 5 种坐标

• Event.screenX 相对于显示器左上角的水平坐标
• Event.screenY
• Event.clientX 相对于浏览器视口左上角的水平坐标
• Event.clientY
• Event.offsetX 相对于事件源左上角的水平坐标
• Event.offsetY
• Event.pageX 相对于整个网页左上角的水平坐标
• Event.pageY

Element.getBoundingClientRect()

返回元素的大小及其相对于视口的位置。

• top
• left
• bottom
• right

可视区域

/**
 * 获取页面可视区域范围
 */
var clients = window.innerHeight // IE 9 以上
    || document.documentElement.clientHeight
    || document.body.clientHeight;

/**
 * 判断元素位置是否进入可视区域
 */
var top = element.getBoundingClientRect().top;

判断页面或元素是否滚动到底

/**
 * 判断页面是否滚动到底
 */
if (window.innerHeight + document.body.scrollTop === document.body.scrollHeight) {
  // 页面已经滚动到底
}

/**
 * 判断元素是否滚动到底
 */
if (element.scrollTop + element.clientHeight === element.scrollHeight) {
  // 元素已经滚动到底了
}

获取页面滚动条宽度

function getScrollBar() {
  var el = document.createElement('p');
  var style = { width: '100px', height: '1000px', overflowY: 'scroll' };
  for ( var item in style ) {
    el.style[item] = style[item];
  }
  var scrollBarWidth = el.offsetWidth - el.clientWidth;
  el.remove();
  return scrollBarWidth;
}

jQuery 中的宽高

• $el.height() - 返回数值

• $el.width()

• $el.css('width') - 返回带单位 px 的字符串

• $el.css('height')

• $el.innerWidth() - 返回元素的内部宽度 width + padding

• $el.innerHeight()

• $el.outerWidth() - 返回元素的外部宽度 width + padding + border

• $el.outerHeight()

• $el.outerWidth(true) - 返回元素的外部宽度 width + padding + border + margin

• $el.outerHeight(true)

• $el.scrollLeft() - 与原生 Element.scrollLeft 返回的值相同

• $el.scrollTop()

• $el.position()

  • $el.position().top - 相对于父元素左上角的垂直距离
  • $el.position().left

• $el.offset()

  • $el.offset().top - 相对于文档左上角的垂直距离
  • $el.offset().left