一.滚动到页面顶部
1.函数代码
const scrollToTop = () => {
const height = document.documentElement.scrollTop || document.body.scrollTop;
if (height > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo({
top:0,
behavior:"smooth"
});
}
};
2.代码说明
Element.scrollTop: 可以获取或设置一个元素的内容垂直滚动的像素数
window.scrollTo(): 滚动到文档中的某个坐标
window.scrollTo(x-coord,y-coord )
// x-coord 是文档中的横轴坐标
// y-coord 是文档中的纵轴坐标
window.scrollTo(options)
/**
* options 包含三个属性的对象:
* top 等同于 y-coord
* left 等同于 x-coord
* behavior 类型 String,表示滚动行为,支持参数:
* smooth(平滑滚动)
* instant(瞬间滚动)
*/
window.requestAnimationFrame(): 告诉浏览器-你希望执行一个动画,并且要求浏览器在下一重绘之前调用指定的函数更新动画。之前执行。优势:由系统决定决定功能的执行时机。60Hz的刷新频率,然后每次刷新的间隔中会执行一次替换函数,不会引起丢帧,不会卡顿。
二.滚动到页面底部
const scrollToBottom = () => {
window.scrollTo(0, document.documentElement.clientHeight);
};
三.滚动到指定元素区域
1.函数代码
const smoothScroll = (element) => {
document.querySelector(element).scrollIntoView({
behavior: "smooth",
});
};
2.代码说明
Element.scrollIntoView(): 会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数
参数说明
alignToTop: Boolean 型参数
①如果为true
,元素的顶端将和其所在滚动区的可视区域的顶端对齐,对应:
scrollIntoViewOptions: {block: "start", inline: "nearest"}
②如果为false
,元素的底端将和其所在滚动区的可视区域的底端对齐,对应:
scrollIntoViewOptions: {block: "end", inline: "nearest"}
scrollIntoViewOptions: Object 型参数
①behavior:定义动画过渡效果, "auto"
或 "smooth"
之一。默认为 "auto"
。
②block:定义垂直方向的对齐, "start"
, "center"
, "end"
, 或 "nearest"
之一。默认为 "start"
。
③inline:定义水平方向的对齐, "start"
, "center"
, "end"
, 或 "nearest"
之一。默认为 "nearest"
四.获取可视窗口宽度
1.函数代码
const getPageViewWidth = () => {
return (
//document.compatMode 表明当前文档的渲染模式是怪异模式/混杂模式还是标准模式。
document.compatMode == "BackCompat"
? document.body
: document.documentElement
).clientWidth;
};
2.代码说明
document.compatMode() 有两个值:
"BackCompat"
:文档为怪异模式/混杂模式。
"CSS1Compat"
:文档不是怪异模式,意味着文档处于标准模式或者准标准模式。
Element.clientWidth和Element.chientHeight取值如图:
五.获取可视窗口高度
const getClientHeight = () => {
let clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight =
document.body.clientHeight < document.documentElement.clientHeight
? document.body.clientHeight
: document.documentElement.clientHeight;
} else {
clientHeight =
document.body.clientHeight > document.documentElement.clientHeight
? document.body.clientHeight
: document.documentElement.clientHeight;
}
return clientHeight;
};
六.打开浏览器全屏
const toFullScreen = () => {
let element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();
}
};
七.退出浏览器全屏
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
};