BOM-各种宽高

fantix 发布于2019-08-02 11:09 / 641人阅读

摘要：表示元素可见课件内容的高度，包括以下几部分可见内容包括的高度，隐藏内容由于存在垂直滚动条不被包括。

1. window下的宽高

获取高度可以可以省略window

window.innerWidth，通过字面意思我们知道这是一个内部的宽度，如果有滚动条，则包含滚动条的宽度

window.innerHeight，表示内部可用的高度，如果有滚动条，则包含滚动条的高度

window.outWidth，整个窗口的宽度

window.outHeight，整个窗口的高度

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

几大差异

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

2. document下的宽高

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

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

与client相关的宽高

与offset相关的宽高

与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由于是隔离元素的一部分，因此不被包含。

2. clientHeight

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

可见内容（包括padding）的高度，隐藏内容由于存在垂直滚动条不被包括。

3. scrollHeight

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

可见内容的高度包括padding

隐藏内容的高度包括padding

不包括border和margin

在线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.当前元素距离文档顶部距离

当offsetParent为body的时候，可以通过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.pageYOffset是window.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;

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

当前的body从顶部滚动了多少距离 document.body.scrollTop

视窗的距离 window.innerHeight

当前图片距离顶部的距离 offsetTop

两个常见的滚动判定

页面滚动离开首屏(这时可显示回到顶部的按钮): document.body.scrollTop > window.innerHeight

页面滚动到底部了(这时可去调接口获取更多内容)： 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

SRC

MDN

blog

size and scroll window

size and scroll

JavaScript学习笔记：视口宽高、位置与滚动高度

GPU云服务器云服务器 BOM bom编码批量去除bom 批量删除BOM头

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52799.html

BOM-各种宽高

摘要：表示元素可见课件内容的高度，包括以下几部分可见内容包括的高度，隐藏内容由于存在垂直滚动条不被包括。 1. window下的宽高获取高度可以可以省略window window.innerWidth，通过字面意思我们知道这是一个内部的宽度，如果有滚动条，则包含滚动条的宽度 window.innerHeight，表示内部可用的高度，如果有滚动条，则包含滚动条的高度 window.o...

Yuanf 2019-08-29 16:17 评论0 收藏0
BOM-各种宽高

摘要：表示元素可见课件内容的高度，包括以下几部分可见内容包括的高度，隐藏内容由于存在垂直滚动条不被包括。 1. window下的宽高获取高度可以可以省略window window.innerWidth，通过字面意思我们知道这是一个内部的宽度，如果有滚动条，则包含滚动条的宽度 window.innerHeight，表示内部可用的高度，如果有滚动条，则包含滚动条的高度 window.o...

MageekChiu 2019-08-23 10:45 评论0 收藏0
前端开发

摘要：前端开发前端概述一什么是前端前端即网络站前台部分，运行在端，移动端等浏览器上展现给用户浏览的页面。文件后缀前端三剑客一标记语言标记语言为非标记语言，不具备编程语言具备的程序逻辑为前端页面的主体，有标签指令与转义字符等组成。前端开发前端概述一、什么是前端前端即网络站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的页面。随着互联网技术的发展，HTML5,CSS3,前端框架的应用，...

SQC 2019-04-23 13:22 评论0 收藏0
JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

garfileo 2019-08-01 18:16 评论0 收藏0
JavaScript 基础知识 - BOM篇

摘要：在中我们需要掌握定时器。定时器不是我们调用，我们只需要把函数的地址传过去，时间到了，会自己调用。参数延时的时间单位毫秒返回定时器的，用于清除示例代码延时定时器秒后将执行的代码。 showImg(https://segmentfault.com/img/remote/1460000012575821?w=1920&h=1080); 前言本篇文章是JavaScript基础知识的BOM篇，...

Object 2019-08-21 18:24 评论0 收藏0