页面滚动事件和页面加载事件 元素大小和位置

页面滚动事件和页面加载事件

• 页面滚动事件 滚动条在滚动的时候持续触发的事件 事件类型scroll

window.addEventListener('scroll', function () {            // 执行的操作        })

• box的内容在进行滚动的时候

box.addEventListener('scroll', function () {            // 执行的操作        })

• 加载事件

		加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
		当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

		建议：后期业务处理之前，先添加load事件，保证所有资源全部加载完毕了

元素大小和位置

• scroll家族

	scroll事件
		scrollWidth/scrollHeight:
			获取元素的宽高值，包含   内容 + padding
		scrollTop, scrollLeft
			获取被卷去的大小
				尽量在scroll事件里面获取被卷去的距离
			可读写
			scrollTop
				获取垂直方向，被卷去头部距离
		返回顶部案例:小火箭
			通过scrollTop获取卷去的距离
			通过scrollTop让页面回到顶部

• offset家族

     可视宽高
			offsetWidth
				包含width padding  border
			offsetHeight
			注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
		相对路径
			相对于定位父容器的距离
			offsetLeft:当前元素相对于定位父容器的左侧距离
			offsetTop:当前元素相对于定位父容器的上侧距离
		特征
			获取出来的是数值,方便计算
			只读属性,只能使用,不能设置
		电梯导航
		京东显示固定导航栏

• client家族

	给window注册的事件
		window.resize
			window.onresize = function () {}
		clientWidth
		clientWidth
		clientTop
		clientLeft