监听页面滚动
// this.onScroll 监听滚动的处理函数
// 监听滚动
window.addEventListener('scroll', this.onScroll, false)
// 卸载监听滚动
window.removeEventListener('scroll', this.onScroll, false)
// 滚动条离顶部高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 窗口高度
let clientHeight = document.documentElement.clientHeight || document.body.clientHeight
// 页面实际高度
let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
// 滚动条距离底部的高度
let scrollBottom = scrollHeight - scrollTop - clientHeight
// 元素demo-card离顶部距离
let itemsTop = document.querySelector(`#demo-card`).offsetTop
// 元素demo-card本身高度
let itemsHeight = document.querySelector(`#demo-card`).offsetHeight
监听窗口宽度变化
// this.getWidth 监听监听窗口宽度变化的处理函数
// 监听窗口宽度变化
window.addEventListener('resize', this.getWidth, false)
// 卸载监听窗口宽度
window.removeEventListener('resize', this.getWidth, false)
// 窗口宽度
let clientWidth = document.documentElement.clientWidth || document.body.clientWidth
// 屏幕物理宽度
let physicsWidth = window.screen.width