浏览器

一、浏览器卷去的高度和宽度

+ 当页面比窗口宽或者高的时候
+ 会有一部分是随着滚动被隐藏的
+ 我们管 上面隐藏的叫做 卷去的高度
+ 我们管 左边隐藏的叫做 卷去的宽度

获取卷去的高度:
文档 html
1. document.documentElement.scrollTop
=> 使用必须要由 DOCTYPE 标签
2. document.body.scrollTop
=> 使用必须要没有 DOCTYPE 标签
3. 兼容写法
=> var scrollTop = document.documentElement.scrollTop || documentElement.body.scrollTop
=> || 当作短路表达式使用的
-> 当前面为 true 的时候, 那么就直接返回前面的值
-> 当前面为 false 的时候, 那么就返回后面的值, 不管后面是不是 false

获取卷去的宽度:
1. document.documentElement.scrollLeft
=> 使用必须要有 DOCTYPE 标签
2. document.body.scrollLeft
=> 使用必须没有 DOCTYPE 标签
3. 兼容的写法
=> var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft

二、浏览器的常见事件

+ 由浏览器行为触发的事件

1. window.onload = function () {}
=> 页面所有资源加载完毕后执行
=> 所有资源: 图片, 视频, 音频, ...
=> 作用: JS 前置
-> 当你需要把 JS 代码写在 head 标签里面的时候
-> 最好加上一个 window.onload

2. window.onscroll = function () {}
=> 浏览器滚动条滚动的时候触发
=> 不管横向还是纵向, 只要滚动就触发
=> 作用:
1. 楼层导航
2. 顶部通栏和回到顶部按钮的显示
3. 渐近显示页面
4. 瀑布流

3. window.onresize = function () {}
=> 浏览器可视窗口改变的时候触发
=> 只要改变就会触发
=> 一般结合 innerWidth 和 innerHeight 来判断屏幕尺寸
-> 移动端: 横屏
-> 响应式布局: 判断窗口大小

浏览器窗口尺寸

+ 指的是 浏览器 可视窗口的尺寸
+ 浏览器有可能会出现滚动条
=> 再一般浏览器滚动条时算浏览器的一部分的
=> 再 MAC 上, 是不算的
+ 两个属性
1. innerWidth
2. innerHeight
+ 共同点: 包含滚动条的尺寸

获取浏览器窗口尺寸

+ BOM 级别的获取:
=> innerWidth
=> innerHeight
=> 拿到的是包含滚动条的尺寸
+ DOM 级别的获取:
=> 其实就是获取页面的那一部分尺寸
=> document.documentElement.clientWidth
=> document.documentElement.clientHeight