DOM 滚动条,窗口尺寸
2020-01-19 本文已影响0人
ticktackkk
window.pageXOffset 求滚动条横向的距离(ie9以下不兼容)
window.pageYOffset 求滚动条垂直的距离(ie9以下不兼容)
document.body.scrollLeft
document.body.scrollTop
document.documentElement.scrollLeft
document.documentElement.scrollTop
封装一个兼容的返回滚动条距离方法
function getScroll() {
if (window.pageXOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset
}
} else {
return{
x:document.documentElement.scrollLeft()+document.body.scrollLeft,
y:document.documentElement.scrollTop()+document.body.scrollTop
}
}
}
查看视口的尺寸
window.ineerWidth当前页面的宽(ie9以下不兼容)
window.innerHeight 当前页面的高度(ie9以下不兼容)
标准模式 document.documentElement.clientWidth
标准模式 document.documentElement.clientHeight
不标准模式下(怪异模式)document.body.clientWidth
不标准模式下(怪异模式)document.body.clientHeight
封装一个查看视口兼容性的方法
function getViewpostOffest() {
if (window.innerWidth) {
return {
w: window.innerWidth,
h: window.innerHeight
}
} else {
if (document.compatMode === 'BackCompat') {
return {
w: document.body.clientWidth,
h: document.body.clientHeight
}
} else {
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight
}
}
}
}