一 常用的宽高属性

在日常开发的时候，我们常常需要用到这几个高度信息。浏览器的视口高度和宽度，浏览器的卷动高度，正文内容的总高度等等信息，我在下图中列出了在工作中最常用的几个宽度和高度信息。并在本篇文章中对各种常见宽高进行说明。

各种常见的高度：

二 各类宽高说明

2.1 window.innerHeight/window.innerWidth

window下的宽高属性最常见的就是window.innerHeight/window.innerWidth了。这个属性表示的是浏览器正文可见区域的高度和宽度。window.innerHeight包括水平滚动条的部分（如果存在的话，在通常情况下 window.innerHeight == document.body.clientHeight)

2.2 window.outerHeight/window.outerWidth

window.outerHeight和window.outerWidth表示的是浏览器可见区域（正文加上其他的一些乱七八糟的高度和宽度，我自己的理解就是你能一眼看完的所有浏览器区域）

2.3 document.body.scrollHeight/document.body.scrollWidth

document.body.scrollHeight/document.body.scrollWidth表示的是浏览器所有正文部分的高度／宽度（即你一眼看不完的区域的高度和宽度也算在里面）

2.4 document.body.scrollTop/document.body.scrollLeft

这两个高度表示的是水平和垂直滚动条滚动的距离。通常情况下
document.body.scrollTop + window.innerHeight(document.body.clientHeight) = document.body.scrollHeight
document.body.scrollLeft + window.innerWidth(document.body.clientWidth) = document.body.scrollWidth

所有，下列语句可以判断一个滚动容器是否滚动容器底部

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

三 各种经验和坑

3.1 document.body.scrollTop值总是0

页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

页面没有DTD，即没指定DOCTYPE时，使用document.body。

IE和Firefox都是如此。

而我的页面加了<!DOCTYPE html>，所以得使用document.documentElement.scrollTop。

参考资料&内容来源：

https://segmentfault.com/a/1190000009445930

https://blog.csdn.net/jiabin_xu/article/details/80537089

window窗口的各种宽高的更多相关文章

  1. React组件自适应窗口宽高

    很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...

  2. DOM中获取宽高、位置总结

    原生JS 一.文档.窗口的宽高和位置 // 获取屏幕的宽高 window.screen.height | window.screen.width // 屏幕可用工作区宽高 window.screen. ...

  3. js学习日记-各种宽高总结（配图）

    1.窗口和浏览器 window.innerWidth.window.innerHeight   浏览器内部可用宽高 window.outerWidth.window.outerHeight   浏览器 ...

  4. BOM，文档宽高及窗口事件小析

    (一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...

  5. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  6. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  7. Android应用：StatusBar状态栏、NavigationBar虚拟按键栏、ActionBar标题栏、Window屏幕内容区域等的宽高

    一.屏幕中各种栏目以及屏幕的尺寸 当我们需要计算屏幕中一些元素的高度时,或许需要先获取到屏幕或者各种栏目的高度,下面这个类包含了Status bar状态栏,Navigation bar虚拟按键栏,Ac ...

  8. iframe跨域动态设置主窗口宽高

    Q:在A项目的a页面嵌入一个iframe,src是B项目的b页面,怎样让a页面的高度跟b页面的高度一样? A:解决跨域方案:增加一个A项目的c页面. 操作步骤: 一,a页面的iframe设置: 获取到 ...

  9. easyui 布局之window和panel一起使用时，拉动window宽高时panel不跟随一起变化

    项目开发中布局是每一个组件都由最外层的window和内部的至少一个panel组成,其他的细小组件再依次放到panel中. 问题:当拉动外部的window时我们希望内部的panel的宽高也跟着变化,但是 ...

随机推荐

  1. 洛谷——P2781 传教

    P2781 传教 题目背景 写完暑假作业后,bx2k去找pear玩.pear表示他要去汉中传教,于是bx2k准备跟着去围观. 题目描述 pear把即将接受传教的人排成一行,每个人从左到右的编号为1-n ...

  2. MariaDB+Galera+Haproxy+Keepalived搭建集群

    1.MariaDB Galera Cluster介绍 MariaDB Galera Cluster是MariaDB同步多主机集群,它仅支持XtraDB/InnoDB存储引擎,在MySQLInnoDB存 ...

  3. Centos7下实现多虚拟机互信

    假设CentOS 7三台虚拟机A(192.168.111.10).B(192.168.111.11).C(192.168.111.12),需要保证三台虚拟机之间网络的连通性. 操作步骤: 一.在A机上 ...

  4. Install Ruby on Rails on Ubuntu 12.04 LTS

    1:Update package repository. sudo apt-get update 2:Install git and Curl.     Git:是一个简单,快速,高效的版本控制系统. ...

  5. UIScrollView/UITableView 一直显示滚动条(ScrollBar Indicators)、滚动条Width(宽度)、滚动条Color(颜色)

    在 IOS 中,对 UIScrollView 的滚动条(ScrollBar Indicators)的自定义设置接口,一直都是很少的.除了能自定义简单的样式(UIScrollViewIndicatorS ...

  6. ylb：了解存储过程

    ylbtech-SQL Server:SQL Server-了解存储过程 了解存储过程 ylb:了解存储过程 返回顶部 存储过程 2.2.1 主要的编程结构: 变量 数据类型 输入/输出变量 返回值 ...

  7. nginx/iptables动态IP黑白名单实现方案

    nginx/iptables动态IP黑白名单实现方案 一.手动封IP步骤 1.Nginx手动封IP 1.获取各个IP访问次数 awk '{print $1}' nginx.access.log |so ...

  8. 从零开始搭建GitHub个人博客--第一步

    最近一段时间工作不是很忙,便开始着手整理博客并梳理自己的简历 可是,打开cnblog后第一眼我便开始了纠结~ 原起: 一直在cnblog写博客,看博客,突然发现这种在线纯文档记录的方式俨然跟不上时代的 ...

  9. VC++动态链接库(DLL)编程深入浅出(二)

    好,让我们正式进入动态链接库的世界,先来看看最一般的DLL,即非MFC DLL 上节给大家介绍了静态链接库与库的调试与查看,本节主要介绍非MFC DLL. 4.非MFC DLL 4.1一个简单的DLL ...

  10. cart算法