javascript - 这种情况下怎么实现侧边导航栏滚动？

Question

要实现的效果
右边内容部分滚动，左边的导航栏自动选中对应部分，导航栏点击也可以跳转到对应部分；

遇到的问题
右边内容特别多，标题大多嵌套在组件中，有些包含标题的部分还是循环出来的，不好获取标题；

目前想到的方法
在挂载完成后通过 querySelector 去获取所有的标题，

Answer 1

这是一种常见的网页设计模式，通常用于提供侧边导航栏，以帮助用户快速导航到网站的不同部分。以下是一种可能的实现方式：

首先，你需要有一个侧边导航栏，以及一个包含内容的主面板。在HTML中，这可能看起来像这样：

<div id="sidebar">  <ul>    <li><a href="#section1">Section 1</a></li>    <li><a href="#section2">Section 2</a></li>    <!-- More sections... -->  </ul></div><div id="content">  <div id="section1">Content 1</div>  <div id="section2">Content 2</div>  <!-- More sections... --></div>

在这个HTML结构中，侧边导航栏包含一些链接，每个链接都指向内容面板中的一个特定部分（由id属性标识）。

接下来，你需要使用JavaScript来实现滚动效果。你可以使用window.scrollTo()函数来滚动页面，并使用事件监听器来检测侧边导航栏的点击事件。以下是一个基本的实现：

// 获取侧边导航栏和内容面板const sidebar = document.getElementById('sidebar');const content = document.getElementById('content');// 为每个链接添加点击事件监听器const links = sidebar.getElementsByTagName('a');for (let i = 0; i < links.length; i++) {  links[i].addEventListener('click', function(e) {    // 阻止默认的点击事件（即打开链接）    e.preventDefault();    // 获取目标部分的ID    const targetId = this.getAttribute('href');    // 滚动到目标部分    window.scrollTo(0, document.getElementById(targetId).offsetTop);  });}

这个JavaScript代码会监听侧边导航栏中的所有链接的点击事件。当一个链接被点击时，它会阻止默认的点击事件（即打开链接），然后获取目标部分的ID，并滚动到目标部分。