navscroll-js是轻量级的Vue.js 2组件/指令，用于在滚动页面时突出显示菜单项，单击项目时也滚动到目标部分。

特征：

• 滚动到给定容器内的元素
• 在滚动容器中基于当前可见部分滚动时突出显示导航项
• 使用智能DOM观察器跟踪给定包装器元素内添加/删除的导航项
• 用于 window.requestAnimationFrame 执行动画以优化性能。
• 支持动画取消
• 出色的Bezier轻松微库简化了工作
• 完全可定制的行为，例如通过传递配置对象来缓和或滚动轴
• 尽可能使用被动事件侦听器以获得更好的性能

安装和下载：

# Yarn
$ yarn add navscroll

# NPM
$ npm install navscroll --save

用法：

将其用作Vue.js组件或指令

let NavScroll = require('navscroll');
Vue.use(NavScroll);

// 这将全局注册“navsoll”指令和组件。在Vue实例中，可以按如下方式重命名：
new Vue({
  components: { 'new-name': NavScroll }
  // 或
  directives: { 'new-name': NavScroll }
})

html（作为组件）

<navscroll class="nav-scroll-items"
      container="#my-scrollable-container"
      item-selector=".item"
      active-class="active-element">

      <a v-for="(entry,i) of entries" :key="i"
        :href="'#'+entry+'-target'"
        class="item">我的选项 {{i}}</a>
</navscroll>

html（作为指令）

<nav class="nav-scroll-items"
     v-navscroll:item="{
       container: '#my-scrollable-container',
       activeClass: 'active-element'
     }">

      <a v-for="(entry,i) of entries" :key="i"
        :href="'#'+entry+'-target'"
        class="item"我的选项 {{i}}</a>
</nav>

默认选项

{
  /**
  * The scrollable container.
  * It can be a selector string or the HTML element itself
  *
  * @default 'body'
  * @type {String|HTMLElement}
  */
  container: 'body',
  /**
  * Selector that will be used to recognize the navigation items inside the navigation wrapper.
  *
  * @default  'scroll-item'
  * @type {String}
  */
  itemSelector: '.scroll-item',
  /**
  * Class that will be applied to the menu item after the scroll animation.
  *
  * @default  'active'
  * @type {String}
  */
  activeClass: 'active',
  /**
   * The target element/selector for the scrollTo method. Only used when registering
   * click handlers on the nav items. If the option is not set, registration will use
   * the href or the dataset.href of the registered nav item.
   * Alias: 'element'
   * 
   * @default null
   * @type {String|HTMLElement}
   */
  el: null,
  /**
  * The duration of the scroll animation
  *
  * @default 600
  * @type {Number}
  */
  duration: 600,
  /**
  * Your custom easing value for the click to scroll functionality.
  * It must be:
  * - a string with 4 values separated by commas in a cubic bezier format (ex: '.5,0,.35,1').
  * - a string value among one of the following values:
  *       'ease', 'linear', 'ease-in', 'ease-out' or 'ease-in-out'
  * - an array of 4 values in a cubic bezier format (ex: [0.5, 0, 0.35, 1]).
  *
  * @example ".5,0,.35,1"
  * @default 'ease'
  * @type {String|Array}
  */
  easing: "ease",
  /**
  * Whether to scroll on the X axis
  *
  * @default false
  * @type {Boolean}
  */
  scrollX: false,
  /**
  * Whether to scroll on the Y axis
  *
  * @default true
  * @type {Boolean}
  */
  scrollY: true,
  /**
  * Amount of space between top / left side of screen and the section to
  * highlight.
  *
  * @default 0
  * @type {Number}
  */
  offset: 0,
  /**
  * Threshold amount of space between left side of screen and the section to
  * highlight as the current one (for the onScroll handler).
  *
  * @default (2/3 of the X axis of the screen, calculated each time onScroll is called)
  * @type {Number}
  */
  onScrollOffsetX: undefined,
  /**
  * Threshold amount of space between top side of screen and the section to
  * highlight as the current one (for the onScroll handler).
  *
  * @default (2/3 of the Y axis of the screen, calculated each time onScroll is called)
  * @type {Number}
  */
  onScrollOffsetY: undefined,
  /**
  * Defines whether to track section changes when
  * clicking an item to scroll to its section. If set to true,
  * the scrolling listener will always keep track and change the active class
  * to the current section while scrolling, if false, the scrolling handler will be
  * removed temporarily from the scrolling container and the active class will be
  * immediately applied to the clicked menu item, ignoring the passed sections
  * until the scrolling is over.
  *
  * @default false
  * @type {Boolean}
  */
  alwaysTrack: false,
  /**
  * Allow the scroll animation to be cancelled.
  * In that case, events like 'keyup' or 'touchmove' will cancel the animation
  * and scroll the content immediately to the target.
  *
  * @default 0
  * @type {Boolean}
  */
  cancelable: true,
  /**
  * Whether to stop the propagation of the click event on a menu item
  *
  * @default true
  * @type {Boolean}
  */
  stopPropagation: true,
  /**
  * Callback called when scrolling is finished.
  * Also called when the scroll animation is cancelled (right after the onCancel callback).
  *
  * @default null
  * @type {Function}
  */
  onDone: null,
  /**
  * Callback called when the scroll animation is cancelled.
  *
  * @default null
  * @type {Function}
  */
  onCancel: null,
  /**
  * Whether to update window.location.hash when a link menu item with a href is clicked
  *
  * @default true
  * @type {Boolean}
  */
  anchor: true,
  /**
  * Hash of the target section.
  * It will be applyed to window.location.hash if the `anchor` option is set to true.
  *
  * NOTE: If the clicked item or if the `clickedNavItem` option is set and the element has
  * a href or a data-href attribute, this attribute it will have priority to this option.
  *
  * @default null
  * @type {String}
  */
  hash: null,
  /**
  * Enables/disables the scrolling when clicking in a menu item.
  * Disable if you'd like to handle the scrolling by your own.
  *
  * @default true
  * @type {Boolean}
  */
  clickToScroll: true,
  /**
  * The reference to the navigation element that was clicked to trigger the scroll.
  *
  * @default null
  * @type {HTMLElement}
  */
  clickedNavItem: null,
  /**
  * An array of navigation elements that can be clicked to trigger
  * a scroll to their target section.
  *
  * @default []
  * @type {Array<HTMLElement>}
  */
  navItems: [],
}

---

官网：https://github.com/nash403/navscroll-js

演示：https://www.vue365.cn/code_demo.php?id=3254

GitHub下载：https://github.com/nash403/navscroll-js/archive/master.zip