浏览器

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

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

获取卷去的高度:
文档 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 来判断屏幕尺寸
-> 移动端: 横屏
-> 响应式布局: 判断窗口大小

 

标签：浏览器,documentElement,scrollLeft,window,scrollTop,document
来源： https://www.cnblogs.com/phantomyy/p/15008282.html