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

小江

15513

发布于
2023-11-06 四川

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

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

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

前端 javascript css3 vue3

html5

阅读 1.3k

AI BotBETA

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

首先，你需要有一个侧边导航栏，以及一个包含内容的主面板。在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，并滚动到目标部分。

3 个回答

得票最新