JS 滚动条控制

如何控制滚动条到指定位置？

当页面上有四篇文章，如何控制指定文章置顶

  <article>
    <h1>文章一</h1>
    <p>这是文章一的内容</p>
  </article>
  <article>
    <h1>文章二</h1>
    <p>这是文章二的内容</p>
  </article>
  <article>
    <h1>文章三</h1>
    <p>这是文章三的内容</p>
  </article>
  <article>
    <h1>文章四</h1>
    <p>这是文章四的内容</p>
  </article>

方法一：锚点

    // 获取所有article元素，并为它们添加id属性
    const articles = document.querySelectorAll('article');
    articles.forEach((item, index) => item.setAttribute('id', 'article-' + (index + 1)));
    const scrollToAnchor = (anchor) => {
      window.location.hash = anchor;
    }
    // 滚动到文章三的位置
    scrollToAnchor('article-3');

优点：可靠性高

缺点：需要添加不必要的属性，且不能控制距离顶部的偏移量，如果顶部有遮盖层，会被遮盖

方法二：获取元素距离顶部的偏移量，通过js控制滚动条到指定位置

    // 获取所有article元素，并计算它们的offsetTop值
    const articles = document.querySelectorAll('article');
    const offsetTops = []
    articles.forEach((item, index) => offsetTops.push(item.offsetTop));
    const scrollToArticle = (index, offset = 0) => {
      // scrollTo接受两个参数，第一个参数是x轴的偏移量，第二个参数是y轴的偏移量。如果只传递一个参数，那么默认第二个参数为0。
      // window.scrollTo(0, offsetTops[index - 1] - offset)
      // 想要滚动条的滚动行为更加丝滑可以添加behavior: 'smooth'，但是需要浏览器支持
      window.scrollTo({ left: 0, top: offsetTops[index - 1] - offset, behavior: 'smooth' })
    };
    // 滚动到文章二的位置，且距离顶部100px
    // scrollToArticle(2);
    // 滚动到文章三的位置，且距离顶部100px
    scrollToArticle(3, 100);

优点：可以控制元素滑到顶部后的偏移量，且可以添加smooth值让滚动变得丝滑

缺点：需要知道产生滚动条的元素，否则无法生效 

当产生滚动条的元素不是windows元素时,window.scrollTo就会失效

  <div style="height: 300px;overflow: auto;">
    <article>
      <h1>文章一</h1>
      <p>这是文章一的内容</p>
    </article>
    <article>
      <h1>文章二</h1>
      <p>这是文章二的内容</p>
    </article>
    <article>
      <h1>文章三</h1>
      <p>这是文章三的内容</p>
    </article>
    <article>
      <h1>文章四</h1>
      <p>这是文章四的内容</p>
    </article>
  </div>

此时我们需要先获取产生滚动条的父元素，将window替换为这个父元素

    // 获取所有article元素，并计算它们的offsetTop值
    const articles = document.querySelectorAll('article');
    // 判断元素是否产生滚动条
    function hasScrollbar(element) {
      return element.scrollHeight > element.clientHeight;
    }
    // 获取产生滚动条的元素
    function getHasScrollbarEle(element) {
      return hasScrollbar(element) ? element : getHasScrollbarEle(element.parentElement);
    }
    const scrollDom = getHasScrollbarEle(articles[0]);
    const offsetTops = []
    articles.forEach((item, index) => offsetTops.push(item.offsetTop));
    const scrollToArticle = (index, offset = 0) => {
      // scrollTo接受两个参数，第一个参数是x轴的偏移量，第二个参数是y轴的偏移量。如果只传递一个参数，那么默认第二个参数为0。
      // window.scrollTo(0, offsetTops[index - 1] - offset)
      // 想要滚动条的滚动行为更加丝滑可以添加behavior: 'smooth'，但是需要浏览器支持
      scrollDom.scrollTo({ left: 0, top: offsetTops[index - 1] - offset, behavior: 'smooth' })
    };
    // 滚动到文章二的位置，且距离顶部100px
    // scrollToArticle(2);
    // 滚动到文章三的位置，且距离顶部100px
    scrollToArticle(3, 100);

缺点：如果页面情况更加复杂，此方案还是会产生不可预料的问题

方案三：scrollIntoView

    // 获取所有article元素
    const articles = document.querySelectorAll('article');
    function scrollToArticle(index) {
      articles[index - 1].scrollIntoView({
        // 定义垂直方向的对齐 start、center、end 或 nearest
        block: 'start',
        // 定义水平方向的对齐 start、center、end 或 nearest
        inline: 'nearest',
        behavior: 'smooth'
      });
    }
    scrollToArticle(2)

优点：代码简单，可靠性高

缺点：不能指定偏移量

改进：

const scroll = (element, offset = 0) => {
  // 在当前元素的前面添加一个兄弟元素
  const brotherDom = document.createElement("div");
  const styles = {
    height: `${offset}px`,
    width: "100%",
    position: "absolute",
    left: "0",
    transform: "translateY(-100%)",
    background: "transparent",
    zIndex: "-1",
  };
  Object.keys(styles).forEach(key => {
    brotherDom.style[key] = styles[key];
  });
  const parentNode = element.parentNode;
  parentNode.style.position = parentNode.style.position || "relative";
  parentNode.insertBefore(brotherDom, element);
  brotherDom.scrollIntoView({ behavior: "smooth" });
};

使用：

// 将指定元素置顶且偏移100px
scroll(document.querySelectorAll('article')[2], 100)