BOM
BOM
查看与设置滚动条的滚动距离
IE9及以上
let x = window.pageXOffset; // 横向滚动距离
let y = window.pageYOffset; // 纵向滚动距离
IE8及以下
- 兼容性比较混乱，用时取两值相加，因为不可能存在两个同时有值
let x = document.body.scrollLeft + document.documentElement.scroolLeft; // 横向滚动距离
let y = document.body.scrolTop + document.documentElement.scroolTop; // 纵向滚动距离
// 简写
let x = document.body.scrollLeft | document.documentElement.scroolLeft;
let y = document.body.scrolTop ｜ document.documentElement.scroolTop;
封装兼容性方法（求滚动轮滚动距离）
const getScrollOffset = () => {
if (window.pageXOffset || window.pageYOffset) {
return {
x: window.pageXOffset,
y: window.pageYOffset,
};
} else {
return {
x: document.body.scrollLeft + document.documentElement.scroolLeft,
y: document.body.scrolTop + document.documentElement.scroolTop,
};
}
};
// 简写
const getScrollOffset = () => {
let scrollLeft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
let scrollTop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
return {
x: scrollLeft,
y: scrollTop
}
}
设置滚动
-
window.scrollTo(x, y)
-
let x = 0; let y = 20; window.scrollTo(x, y)
查看视口的尺寸
IE9及以上
let w = window.innerWidth; // 可视区域宽度
let h = window.innerHeight; // 可视区域高度
IE8及以下
// 标准模式下，任意浏览器都兼容（如何区分是否标准模式 document.compatMode == CSS1Compat，在.html头部有<!DOCTYPE html> 就是标准模式）
let w = document.documentElement.clientWidth; // 可视区域宽度
let h = document.documentElement.clientHeight; // 可视区域高度
怪异模式下的浏览器
document.body.clientWidth / document.body.clientHeight
封装兼容性方法，返回浏览器适口尺寸
const getViewportOffset = () => {
if (window.innerHeight || window.innerWidth) { // ie9 及以上
return {
w: window.innerWidth,
h: window.innerHeight,
};
} else { // ie8及以下
if (document.compatMode === "BackCompat") { // 怪异模式
// 怪异模式
return {
w: document.body.clientWidth,
y: document.body.clientHeight,
};
} else { // 标准模式
return {
w: document.documentElement.clientWidth,
h: document.documentElement.clientHeight,
};
}
}
};
// 简写
const getViewportOffset = () => {
let clientWidth = window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
let clientHeight = window.innerHeight || document.body.clientHeight || document.documentElement.clientHeight;
return {
x: clientWidth,
y: clientHeight
}
}
