设置全局滚动条高度
1.window.scrollTo(0,0) 滚动到页面顶部
window.scrollTo(x,y) 滚动到页面指定位置
3.scrollTop来设置
document.scrollingElement.scrollTop = 0;
scrollTo()和scrollBy()的区别:
scrollTo()是指定位置,scrollBy()是相对当前滚动条位置滚动。
指定元素显示在视野中
1.获取元素距离文档顶部的距离
offsetTop =document.getElementById().offsetTop;
window.scrollTo(0,offsetTop);
2.锚点 href (还可以跨页面跳转)
<a href="#id"> </a> (点击后指定元素出现在滚动条顶部
<div id="" > </div>
3.用scrollIntoView()
document.getElementById("").scrollIntoView({ block: "start" || "center" || "end" })
滚动过渡效果 平滑
1. JS实现
window.scrollTo({behavior:"smooth"})
(scrollBy(),scrollIntoView()同用法)
2.CSS实现
html或者* {
scroll-behavior:smooth; // 全局滚动平滑效果
}
scrollingElement 替代兼容性方法
原来( let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; )
现在可以 let scrollHeight = document.scrollingElement.scrollHeight;
滚动到页面底部
window.scrollTo({
left: 0,
top: document.scrollingElement.scrollHeight
});
判断浏览器已经滚动到底
window.addEventListener("scroll", () => {
let {
scrollTop,
scrollHeight,
clientHeight
} = document.scrollingElement;
// 当前滚动高度 + 视口高度 >= 文档总高度
if (scrollTop + clientHeight >= scrollHeight) {
console.log("已到达底部");
}
});