js基础之滚动事件总结

Window.scroll() 已被废弃不推荐使用  方法滚动窗口至文档中的特定位置。

• 语法

window.scroll(xCoord,yCloord)
window.scroll(options)

// xCoord 你想要在左上角显示的文档水平轴像素。
// yCloord 你想要在左上角显示的文档垂直轴像素。

// options 参数如下
// {top:xx,left:xx,behaior:"auto"} 
// top:指定沿 Y 轴滚动窗口或元素的像素数。
// left:指定沿 X 轴滚动窗口或元素的像素数。
// behaior: 
// auto 滚动行为由 [`scroll-behavior`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior) 的计算值来决定
// instant：滚动应在一次跳转中即时完成
// smooth：滚动应该平滑地进行动画展示


// 例如 平滑滚动
window.scroll({
  top: 100,
  left: 100,
  behavior: "smooth",
});

Window.scrollBy()  方法在窗口中按指定的偏移量滚动文档

• 语法

window.scrollBy(xCoord,yCloord) 
window.scrollBy(options)

// xCoord 你想滚动你那个的水平轴像素。
// yCloord 你想滚动的垂直轴像素。


// options 参数如下
// {top:xx,left:xx,behaior:"auto"} 
// top:指定沿 Y 轴滚动窗口或元素的像素数。
// left:指定沿 X 轴滚动窗口或元素的像素数。
// behaior: 
// auto 滚动行为由 [`scroll-behavior`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior) 的计算值来决定
// instant：滚动应在一次跳转中即时完成
// smooth：滚动应该平滑地进行动画展示


// 例如 向下滚动一页
window.scrollBy(0,window.innerHeight);

// 向上滚动一页
window.scrollBy(0,-window.innerHeight);

// 使用options 示例
window.scrollBy({
  top: 100,
  left: 100,
  behavior: "smooth",
});

Window.scrollTop() 推荐使用  会滚动到文档中的一组特定坐标

• 语法

window.scrollTop(xCoord,yCloord) 
window.scrollTop(options)

// xCoord 是你希望显示在左上角的文档水平轴像素
// yCloord 是你希望显示再左上角的文档垂直像素


// options 参数如下
// {top:xx,left:xx,behaior:"auto"} 
// top:指定沿 Y 轴滚动窗口或元素的像素数。
// left:指定沿 X 轴滚动窗口或元素的像素数。
// behaior: 
// auto 滚动行为由 [`scroll-behavior`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior) 的计算值来决定
// instant：滚动应在一次跳转中即时完成
// smooth：滚动应该平滑地进行动画展示


// 例如
window.scrollTo(0,1000);


// 使用options 示例
window.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});

Element.scrollIntoView()  会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见

• 语法

scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)

// alignToTop 可选 一个布尔值
// 如果为true, 元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的
// scrollIntoViewOptions：{block:"start",inline:"nearest"}
// 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的
// scrollIntoViewOptions：{block:"end",inline:"nearest"}

// scrollIntoViewOptions 可选参数
// behaior: 
// auto 滚动行为由 [`scroll-behavior`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior) 的计算值来决定
// instant：滚动应在一次跳转中即时完成
// smooth：滚动应该平滑地进行动画展示

// block 定义垂直方向的对齐，start/center/end/nearest 之一。默认为start。
// inline 定义水平方向的对齐，start/center/end/nearest 之一。默认nearest。

• 示例如下

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

scrollingElement  (Document的只读属性)

返回滚动文档的 Element 对象的引用。在标准模式下，这是文档的根元素， document.documentElement 

当在怪异模式下，scrollingElement 属性返回 HTML body 元素（若不存在返回 null）。

该对象可以兼容获取scrollTop、scrollHeight、clientHeight等属性

• 旧的方法获取滚动高度

let scrollHeight = document.docmentElement.scrollHeight || document.body.scrollHeight

• 现在方法获取滚动高度

let scrollHeight = document.scrollingElement.scrollHeight

实践示例

• 如何滚动到页面底部

window.scrollTop({top:document.scrollingElement.scrollHeight})

• 如何判断浏览器已滚动到底部

 window.addEventListener('scroll', ()=>{
     let {scrollTop,scrollHeight,clientHeight} = document.scrollingElement;
     if(scrollTop + clientHeight >= scrollHeight){
         console.log("已滚动到页面底部")
     }
 });

参考资料

mdn: