1.window.scroll()方法
<button onclick="scroll(0, 100);">点击以向下滚动到第 100 个像素</button>
window.scroll({
top: 100,
left: 100,
behavior: "smooth", //一般应用在与滚动相关的 CSS 属性中,缓慢滑动的动画
});
2.元素滚动事件
- 基本认识：滚动条在滚动的时候持续触发的事件，用来监听整个页面滚动 或者某个元素滚动
-
- 监控浏览器中整个页面的滚动行为，可以将scroll事件绑定到 window上
-
- 监控某个html元素的滚动行为，将scroll实践绑定到该元素上
// ✨✨推荐
window.addEventListener('scroll', function() {
// xxxxx
console.log(document.documentElement) // 得到网页根元素html
console.log(document.documentElement.scrollTop) //浏览器垂直滚动时- 获取被卷去的头部距离
console.log(document.documentElement.scrollLeft)//浏览器水平滚动时- 获取被卷去的左侧距离
})
DOM元素.addEventListener('scroll', function() {
// xxxxx
DOM元素.scrollTop //元素垂直滚动时- 获取被卷去的头部距离
DOM元素.scrollLeft //元素水平滚动时- 获取被卷去的左侧距离
})
3.窗口尺寸
- 在窗口尺寸改变的时候触发事件resize（可以注册一个事件进行监听）
- clientWidth和clientHeight，获取元素的可见部分宽高（不包含border，margin，滚动条等）
- 获取页面大小
document.documentElement.clientWidth
document.documentElement.clientHeight
- 获取元素大小
dom元素.clientWidth
dom元素.clientHeight
4.元素尺寸与位置
- 获得元素自己的【尺寸大小】和元素在【页面中的位置】
大小： offsetWidth 和 offsetHeight 位置: offsetLeft 和 offsetTop
总结：
- window.scroll()方法可以直接去精准的定位一个位置作为可视窗口。
- 滚动事件中，通常用的事件源是window，就是窗口右边的滑轮相关的滚动事件，场景很多，比如：当滚动到一定位置时，显示按钮回到顶部，通常用document.documentElement.scrollTop数据进行判断就可以了。
- 使用元素位置实现网站的导航栏，下横线效果：（下划线）.style.transform =
translateX(${e.target.offsetLeft}px) - 可以通过以下代码实现一个简单的页面滚动进度条：
window.addEventListener('scroll', function() {
let winHeight = window.innerHeight;
let docHeight = document.documentElement.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
let scrollPercent = (scrollTop / (docHeight - winHeight)) * 100; // 假设进度条元素的id为progressBar
let progressBar = document.getElementById('progressBar');
progressBar.style.width = scrollPercent + '%'; });
- 在
scroll事件监听器中，首先获取window.innerHeight（窗口高度）、document.documentElement.scrollHeight（文档总高度）和document.documentElement.scrollTop（滚动距离）。然后通过计算(scrollTop / (docHeight - winHeight)) * 100得到滚动的百分比。最后，将这个百分比应用到进度条元素（id为progressBar）的宽度上，从而实现随着页面滚动，进度条逐渐填充的效果。 - 当文本内容过多时，也可以使用滚动事件根据用户看到的窗口内容，进行内容加载
