如何让顶部导航中带active类的li元素自动滚动到视图内？

不需要借助MutationObserver，直接在为导航项添加active类的同时，调用元素的scrollIntoView()方法就能实现自动滚动到视图范围内的需求。以下是修改后的完整代码：

修改后的JavaScript代码 #

window.addEventListener('DOMContentLoaded', () => {

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      const id = entry.target.getAttribute('id');
      const navItem = document.querySelector(`ul li a[href="#${id}"]`).parentElement;
      if (entry.intersectionRatio > 0) {
        navItem.classList.add('active');
        // 让激活的导航项滚动到视图中，配置参数保证平滑且对齐到容器中心
        navItem.scrollIntoView({
          behavior: 'smooth',
          block: 'nearest',
          inline: 'center'
        });
      } else {
        navItem.classList.remove('active');
      }
    });
  });

  // 跟踪所有带id的h2元素
  document.querySelectorAll('h2[id]').forEach((h2) => {
    observer.observe(h2);
  });
  
});

为什么不用MutationObserver？ #

直接在添加active类的逻辑后执行滚动操作，比监听DOM突变更高效且逻辑更清晰——我们明确知道什么时候会添加active类，不需要额外监听DOM变化来触发滚动。

可选优化：避免重复滚动 #

如果担心频繁触发滚动，可以添加一个判断，只有当当前激活项不在视图范围内时才执行滚动：

// 在添加active类后加入判断
const navContainer = document.querySelector('.table_of_content');
// 检查元素是否在容器可视范围内
const isInView = navItem.getBoundingClientRect().left >= navContainer.getBoundingClientRect().left &&
                 navItem.getBoundingClientRect().right <= navContainer.getBoundingClientRect().right;
if (!isInView) {
  navItem.scrollIntoView({
    behavior: 'smooth',
    block: 'nearest',
    inline: 'center'
  });
}

完整代码示例 #

HTML #

<div class="section">

    <div id="navigation12" class="table_of_content">
        <ul>
          <li><span>In this article</span></li>
          <li><a href="#header1">Heading 1</a></li>
          <li><a href="#header2">Heading 2</a></li>
          <li><a href="#header3">Heading 3</a></li>
          <li><a href="#header4">Heading 4</a></li>
          <li><a href="#header5">Heading 5</a></li>
          <li><a href="#header6">Heading 6</a></li>
          <li><a href="#header7">Heading 7</a></li>
          <li><a href="#header8">Heading 8</a></li>
        </ul>
      </div>

      <h2 id="header1">Header 1</h2>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa, ex. Eaque laboriosam fugiat debitis quisquam maiores ipsa aspernatur quam provident tenetur! Ipsa possimus illum provident. Quam, quaerat cum? Earum, reiciendis!
      <h2 id="header2">Header 2</h2>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia neque, repudiandae minus sit ratione expedita debitis hic sequi recusandae repellat? Eligendi, reiciendis voluptatem. Quidem tempore cupiditate obcaecati rem omnis quis commodi, rerum in delectus beatae eius nulla? Harum laborum, obcaecati ipsa officiis velit voluptatibus alias facilis at recusandae dolores molestias, autem quas. Repellendus ducimus soluta culpa dicta vel eveniet recusandae beatae odit id exercitationem ratione, nemo inventore, unde dolores eligendi quasi pariatur rem labore? Labore eum doloremque non illo, autem optio, excepturi ad quis reiciendis exercitationem necessitatibus fugit? Repellendus dolore ea magnam tempora in corporis sed totam et suscipit! Nihil?
      <h2 id="header3">Header 3</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis, eligendi odit quam necessitatibus enim alias perferendis ut maxime quod quae ipsam minima voluptates voluptatibus at nobis, esse sequi beatae dolor quis. Quia officiis consequuntur, delectus dolore temporibus reprehenderit reiciendis sunt perspiciatis aspernatur, facere veniam. Ad corporis a voluptate provident soluta eveniet? Sunt est deserunt amet assumenda iste odit ad placeat! Vitae aliquam aliquid, molestiae cum aut unde velit laboriosam, perferendis rem asperiores pariatur quam optio quo nostrum saepe quia id dignissimos, consequatur molestias sed nulla ipsum? Molestias ab sapiente dolores ut. Dolor vero quod, distinctio laborum expedita incidunt repudiandae.
      <h2 id="header4">Header 4</h2>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo consequatur, harum doloribus nisi vitae odit non deserunt et veritatis modi maxime repudiandae quasi cum eveniet inventore, fuga similique accusamus ad magnam alias qui optio delectus provident. Asperiores labore molestias quod laborum quasi sequi suscipit, optio tenetur esse soluta debitis eaque, doloribus reiciendis voluptatum iure dolorum quibusdam vel nihil quo ratione cupiditate necessitatibus aliquid obcaecati totam. Deserunt laudantium officiis et? Quas doloribus ipsum nam similique libero velit, tempora, delectus exercitationem cumque autem in iste, perspiciatis repudiandae a aliquid nobis ut voluptate corrupti unde recusandae voluptas rem aut nisi quam. Inventore, dolor.
      <h2 id="header5">Header 5</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi explicabo, numquam aliquam minus eveniet vero neque ratione quidem voluptatem ipsa officiis soluta beatae dicta eligendi quo, nemo quaerat atque mollitia! Vitae mollitia voluptatum natus iusto eum quis debitis, similique illo, libero necessitatibus illum provident ad inventore sed consectetur molestias ipsa impedit obcaecati cumque et. Eveniet, molestiae deserunt rem earum dolor neque animi dignissimos dolore atque provident at numquam repellendus aliquam adipisci officia maxime fuga unde reiciendis saepe, sint culpa recusandae. At neque sapiente mollitia doloremque, architecto voluptatem delectus nulla laboriosam dicta quo animi magnam nisi in? Voluptatum harum et est!
      <h2 id="header6">Header 6</h2>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis distinctio nesciunt ut similique dicta cum est quis soluta harum quam, dolorem sequi repellat, atque provident eius. Atque ea quibusdam quo! Rem nihil pariatur ex magni odio modi sed unde quidem laboriosam doloremque repellat quo eum nemo eaque mollitia adipisci exercitationem ipsam blanditiis, consectetur atque libero totam quaerat officia soluta? Cum ipsam a incidunt cumque earum quod ea quibusdam vel ratione? Minima, id voluptate! Minima cumque quisquam, quod blanditiis quas et est laudantium placeat explicabo, dolorum velit, facilis cupiditate aspernatur nostrum dicta voluptatem adipisci suscipit debitis enim ullam commodi? Magni, consequatur.
      <h2 id="header7">Header 7</h2>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis alias soluta qui accusantium in repellendus, doloremque ullam quis esse optio veniam fugit doloribus mollitia ea, dolorum rem. Unde, adipisci. Totam vel harum maiores illo nobis culpa labore corrupti quasi atque consequuntur, minus odio deleniti iure, ab natus aliquam consectetur asperiores quia eveniet dolorem similique dolore eos quisquam. Quis, ipsam corrupti? Atque molestiae omnis asperiores dolores eos obcaecati aspernatur, recusandae eaque numquam consectetur aut corporis vitae dignissimos et ipsum eum odit id incidunt voluptate perferendis! Saepe tempora iste aspernatur enim quidem labore voluptatem id dolor quam esse! Quibusdam reiciendis inventore hic!
      <h2 id="header8">Header 8</h2>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est amet inventore quae eveniet sequi unde! Consequatur necessitatibus minima molestias quia vero recusandae unde veniam nobis qui saepe minus culpa ab rem aspernatur officiis earum et doloribus, provident eius asperiores. Harum consectetur odio blanditiis, sunt rerum necessitatibus exercitationem vero dolorem rem, cupiditate pariatur officiis repudiandae deserunt modi sequi aspernatur ratione libero perspiciatis illo cum saepe debitis tempora sapiente! Possimus modi nostrum ipsum placeat nam praesentium quos vero in, non dolor debitis dolorum nobis cum natus obcaecati, soluta reprehenderit sapiente. Eius ducimus placeat numquam incidunt magni repudiandae accusantium quasi alias vitae vero!

    </div>

CSS #

.table_of_content li{
    display:inline-flex;    
    margin-right: 20px;
    border-right: 2px solid black;
    padding-right:15px;
}
.table_of_content {
    border-left:none;
    z-index:1000;
    position: sticky;
    background-color:white;
    top: -1px;
    overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;

}
.table_of_content ul {
    margin: 0 auto;
    padding: 15px 0;
}

.table_of_content li.active > a {
    color:#ff9900;
    border-radius:5px;
    text-decoration:underline;
}
.section {
    max-width: 400px;
}

内容的提问来源于stack exchange，提问作者gshaineala