【前端学习】 浏览器滚动

设置全局滚动条高度

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("已到达底部");
  }
});