Scrollspy overflow-x:滚动菜单

Question

我正在使用 Scrollspy 做一些事情。但是我运行遇到了一个问题，找不到解决方案。当我滚动时，我希望它跟随导航栏滑块上的导航项。因为版块多的时候看不清他在哪个版块。我该如何解决这个问题？我尝试了bootstrap的scrollspy组件，但它在那里不起作用，不知道有没有人有更好的解决方案？提前致谢

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>VanillaJS ScrollSpy</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"
    />
    <style>
      html,
      body {
        height: 100%;
      }
      .navbar-start {
        width: 300px;
        overflow-y: scroll;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        border: 2px solid #fff;
      }
      .navbar-brand > .navbar-item {
        font-size: 20px;
        font-weight: bold;
      }
      .navbar-menu .navbar-item {
        font-size: 14px;
        transition: background-color 0.26s, color 0.26s;
      }
      .navbar-menu .navbar-item.active {
        background-color: #222;
        color: red;
      }
      .page {
        height: 100%;
        padding: 80px 0;
        width: 100%;
      }
      .page:nth-child(odd) {
        background-color: #ddd;
      }
      .page:nth-child(even) {
        background-color: #fff;
      }
    </style>
  </head>

  <body>
    <nav
      class="navbar is-dark is-fixed-top"
      role="navigation"
      aria-label="main navigation"
    >
      <div class="container">
        <div id="navbar" class="navbar-menu navbar-scroll">
          <div class="navbar-start">
            <a href="#section1" class="navbar-item active">Section-1</a>
            <a href="#section2" class="navbar-item">Section-2</a>
            <a href="#section3" class="navbar-item">Section-3</a>
            <a href="#section4" class="navbar-item">Section-4</a>
            <a href="#section5" class="navbar-item">Section-5</a>
            <a href="#section6" class="navbar-item">Section-6</a>
            <a href="#section7" class="navbar-item">Section-7</a>
            <a href="#section8" class="navbar-item">Section-8</a>
            <a href="#section9" class="navbar-item">Section-9</a>
            <a href="#section10" class="navbar-item">Section-10</a>
            <a href="#section11" class="navbar-item">Section-11</a>
            <a href="#section12" class="navbar-item">Section-12</a>
          </div>
        </div>
      </div>
    </nav>

    <section id="section1" class="page">
      <div class="container">
        <h2 class="title">Section 1</h2>
      </div>
    </section>

    <section id="section2" class="page">
      <div class="container">
        <h2 class="title">Section 2</h2>
      </div>
    </section>

    <section id="section3" class="page">
      <div class="container">
        <h2 class="title">Section 3</h2>
      </div>
    </section>

    <section id="section4" class="page">
      <div class="container">
        <h2 class="title">Section 4</h2>
      </div>
    </section>

    <section id="section5" class="page">
      <div class="container">
        <h2 class="title">Section 5</h2>
      </div>
    </section>

    <section id="section6" class="page">
      <div class="container">
        <h2 class="title">Section 6</h2>
      </div>
    </section>

    <section id="section7" class="page">
      <div class="container">
        <h2 class="title">Section 7</h2>
      </div>
    </section>

    <section id="section8" class="page">
      <div class="container">
        <h2 class="title">Section 8</h2>
      </div>
    </section>

    <section id="section9" class="page">
      <div class="container">
        <h2 class="title">Section 9</h2>
      </div>
    </section>

    <section id="section10" class="page">
      <div class="container">
        <h2 class="title">Section 10</h2>
      </div>
    </section>

    <section id="section11" class="page">
      <div class="container">
        <h2 class="title">Section 11</h2>
      </div>
    </section>

    <section id="section12" class="page">
      <div class="container">
        <h2 class="title">Section 12</h2>
      </div>
    </section>

    <script src="vanillajs-scrollspy.min.js"></script>
    <script>
      const navbar = document.querySelector("#navbar");
      const scrollspy = new VanillaScrollspy(navbar);
      scrollspy.init();
    </script>
  </body>
</html>

Answer 1

由于 VanillaScrollspy 没有附加任何事件，我修改了它的核心 js 文件并在更新导航项的 class 时调用了一个函数。我创建了一个名为“update_nav_menu_position”的函数，它的工作方式如下

update_nav_menu_position = function(){
    // using jquery here
    var $active_nav_item = $("#navbar").find('a.active'),
        $scroll_elem = $(".navbar-start"),
        left_pos, right_limit, active_elem_left_pos, active_elem_right_pos, scroll_pos, new_scroll_pos;

    if( ! $active_nav_item.length ) {
        return false;
    }

    left_pos = $scroll_elem.offset().left;
    right_limit = $scroll_elem.width() + left_pos;
    active_elem_left_pos = $active_nav_item.offset().left;
    active_elem_right_pos = $active_nav_item.width() + active_elem_left_pos;
    scroll_pos = $scroll_elem.scrollLeft();

    if( active_elem_left_pos > left_pos && active_elem_right_pos < (right_limit - 50) ) {
        return true;
    } else {
        new_scroll_pos = (left_pos + right_limit) / 2;
        new_scroll_pos = active_elem_left_pos - new_scroll_pos;
        new_scroll_pos = scroll_pos + new_scroll_pos;
        $scroll_elem.scrollLeft(new_scroll_pos);
    }

}

我已经初始化了页面顶部的函数变量。

这是您文件的工作示例。 https://codepen.io/ympervej/pen/XWMvKqg

检查我调用该函数的第 200 行。

Scrollspy overflow-x:滚动菜单

Scrollspy overflow-x:scroll menu

html

javascript

css

scrollspy