监听页面滚动&窗口宽度变化

监听页面滚动

// 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