client系列:
clientWidth,clientHeigth 包括content和padding
clientTop,clientLeft 返回边框的宽度
scroll系列:
console.log(box.scrollWidth)
console.log(box.scrollHeight)
content + padding
如果内容超出了容器的高度,得到的scrollHeight就是内容的真实高度
scrollTop 头部卷去的部分
页面被卷去的部分:
window.pageYoffset
动画函数:
// el表示需要 执行动画的元素对象
// target表示动画的结束位置
// 增加一个回调函数(callback)
function animate(el, target, cb) {
clearInterval(el.t1)
el.t1 = setInterval(() => {
let step = (target - el.offsetLeft) / 10
console.log(step)
if (step > 0) {
step = Math.ceil(step)
} else {
step = Math.floor(step)
}
el.style.left = el.offsetLeft + step + 'px'
if (el.offsetLeft == target) {
clearInterval(el.t1)
if (cb) {
cb()
}
}
}, 30)
}
|