BOM-各种宽高

19

1. window下的宽高

获取高度可以可以省略window

  • window.innerWidth,通过字面意思我们知道这是一个内部的宽度,如果有滚动条,则包含滚动条的宽度
  • window.innerHeight,表示内部可用的高度,如果有滚动条,则包含滚动条的高度
  • window.outWidth,整个窗口的宽度
  • window.outHeight,整个窗口的高度

此外还有window.screen下的宽度,主要是与屏幕间的距离

几大差异

属性名 描述 备注
window.innerHeight 浏览器的窗口高度,如果有水平滚动条则包含滚动条的高度 只读属性,IE8及以下不支持
document.documentElement.clientHeight 不包括滚动条,包含html元素边框
document.body.clientHeight 不包含滚动条,不包含htmlbody的边框和滚动条

2. document下的宽高

首先来看一张各种尺寸的图地址

document下一共有三种相关的宽高

  1. client相关的宽高
  2. offset相关的宽高
  3. scroll相关的宽高
  • offsetHeigth表示 VISIBLE content & padding + border + scrollbar,也就是内容的可见区域加上padding和border和滚动条(如果有)
  • clientHeight表示VISIBLE content & padding,也就是可见区域的高度加上padding
  • scrollHeight表示ENTIRE content & padding(visible or hidden),也就是整个内容的高度加上padding(可见或者隐藏)

当我们给div设置宽度和高度时,我们其实设置的是content area的宽高,同理padding和border也是一样,所以元素的总高度为content+margin+padding

1. offsetHeight

offsetHeight表示元素在HTML页面当中所占据的高度,当使用开发者工具,移到div上,所显示的宽高即是实际占用的高度,包括以下几部分:

  • 可见内容区的高度,隐藏的内容由于存在滚动条,不被包含
  • 水平滚动条的高度
  • 顶部和底部的border

margin由于是隔离元素的一部分,因此不被包含。

MDN

2. clientHeight

clientHeight表示元素可见课件内容的高度,包括以下几部分:

  • 可见内容(包括padding)的高度,隐藏内容由于存在垂直滚动条不被包括。

MDN

3. scrollHeight

scrollHeight表示可见/隐藏元素的总高度,包括以下几部分:

  • 可见内容的高度包括padding
  • 隐藏内容的高度包括padding
  • 不包括border和margin

MDN

在线demo

3. HTMLElement.scrollXXX属性

下面的属性均为只读属性,返回当前元素相对scrollParent的距离

  • c.offsetLeft 和 c.offsetTop

一般指当前元素的CSS边框相对于其offsetParent的X和Y坐标

  • c.offsetHeight 和 c.offsetWidth

当前元素及其所有内容的高度,宽度。

  • c.offsetParent

离当前元素最近的定位元素,定位属性包括relative,absolute等,标准模式下为html,怪异模式下为body

4. 兼容方案

1. 浏览器可视区宽高

let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

2.当前元素距离文档顶部距离

offsetParentbody的时候,可以通过el.offsetTop确定距离文档顶部的高度,可以使用下面的方法来判断

function getTop(el) {
  let top = el.offsetTop;
  let currentParent = el.offsetParent;
  while (currentParent != null) {
    top += currentParent.offsetTop;
    currentParent = currentParent.offsetParent;
  }
  return top;
}

3.滚动(被卷去)的高度

兼容方案

  • window.pageYOffsetwindow.scrollY的别名
  • scrollTop表示距离scrollParent被卷去的距离,
  • scrollheight是元素的整个高度,包括overflow隐藏的部分
var x = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
var y = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

是否滚动到底部

// 文档高度 - 滚动的高度 === 视口高度
ele.scrollHeight - ele.scrollTop === ele.clientHeight;

// 文档高度,包括padding,不包括border
ele.scrollHeight = document.documentElement.scrollheight;

// 滚动的高度
ele.scrollTop = Math.round(document.documentElement.scrollTop);

// 视口高度
ele.clientHeight = document.documentElement.clientHeight;

场景一: 懒加载的实现

需要获取的高度

var clientY = window.innerheight || document.documentElement.clientheight || document.body.clientHeight;


// 兼容方案
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

判断图片是否出现在视窗里面,主要有三个高度

  1. 当前的body从顶部滚动了多少距离 document.body.scrollTop
  2. 视窗的距离 window.innerHeight
  3. 当前图片距离顶部的距离 offsetTop

两个常见的滚动判定

  1. 页面滚动离开首屏(这时可显示回到顶部的按钮): document.body.scrollTop > window.innerHeight
  2. 页面滚动到底部了(这时可去调接口获取更多内容): window.scrollY + window.innerHeight > document.body.scrollHeight

    function isBottomVisible () {
      var scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var clientY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      var pageY = document.documentElement.scrollHeight || document.body.scrollHeight; 
      // console.log(scrollY,clientY,pageY);
      
      return Math.round(scrollY) + clientY === pageY
    },

场景二:滚动到指定位置

// 滚动到指定位置
window.scrollTo(0,100);
window.scroll(0,100);

// 计算垂直滚动条的距离
if (document.body.clientWidth !== window.innerWidth) {
    var scrollHeight = window.innerWidth - document.body.clientWidth;
}

// 滚到顶部
if (window.scrollY) {
    window.scroll(0,0);
}

Reference

你可能感兴趣的

载入中...