el 下拉菜单 显示滚动条_滚动时可以轻松突出显示具有“活动”类的菜单项

el 下拉菜单 显示滚动条

视觉滚动 (vue-scrollactive)

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

轻巧且易于使用的vue组件，在滚动页面时高亮显示菜单项，单击时也会滚动到目标部分。

This vue 2 component makes it simple to highlight a menu item with an 'active' class as you scroll.

通过vue 2组件，您可以在滚动时轻松突出显示具有“活动”类的菜单项。

• Highlights menu items as you scroll

  滚动时突出显示菜单项

• Scrolls to item's section on click

  单击时滚动到项目部分

• Customizable easing for scrolling on click

  可自定义的缓动，用于滚动点击

• Vue2

  Vue2

• Uses pure JS!

  使用纯JS！

现场演示 (Live Demo)

https://eddiemf.github.io/vue-scrollactive/examples/example-1.html

https://eddiemf.github.io/vue-scrollactive/examples/example-1.html

安装 (Installation)

Install via npm and use it as a vue plugin in your app.

通过npm安装并将其用作应用程序中的vue插件。

npm install --save-dev vue-scrollactive

var Scrollactive = require('vue-scrollactive');
Vue.use(Scrollactive);

用法 (Usage)

You should wrap your menu in a <scrollactive> tag (which will be your nav) and add a .scrollactive-item class in your <a> tags as I show in the example below:

您应该将菜单包装在<scrollactive>标记(这将是您的导航)中，并在<a>标记中添加.scrollactive-item类，如下面的示例所示：

<scrollactive ref="scrollactive" class="my-nav">
    <a href="#home" class="scrollactive-item">Home</a>
    <a href="#about-us" class="scrollactive-item">About Us</a>
    <a href="#portfolio" class="scrollactive-item">Portfolio</a>
    <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>

You can follow whatever structure you wish, just make sure to set the .scrollactive-item class in the items you want to highlight and set its href with a valid ID that you would like to track while scrolling.

您可以按照所需的任何结构进行操作，只需确保在要突出显示的项目中设置.scrollactive-item类，并使用在滚动时要跟踪的有效ID设置其href 。

大事记 (Events)

Scrollactive will emmit an itemchanged(event, currentItem, lastActiveItem) event when an active menu item is changed to another, you can catch that event doing as the example below:

当活动菜单项更改为另一个菜单项时itemchanged(event, currentItem, lastActiveItem) Scrollactive将发出itemchanged(event, currentItem, lastActiveItem)事件，您可以按以下示例捕获该事件：

<scrollactive ref="scrollactive" class="my-nav" v-on:itemchanged="yourFunction()">
    <a href="#home" class="scrollactive-item">Home</a>
    <a href="#about-us" class="scrollactive-item">About Us</a>
    <a href="#portfolio" class="scrollactive-item">Portfolio</a>
    <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>

动态菜单项 (Dynamic menu items)

In order for the component to update when you add a new menu item, you must call the setScrollactiveItems() function. You can do that as I do in the example below:

为了在添加新菜单项时更新组件，必须调用setScrollactiveItems()函数。 您可以像在下面的示例中那样进行操作：

methods: {
    dynamicItemsFunction() {
        // Add your items
        this.$refs.scrollactive.setScrollactiveItems();
    }
}

Make sure to set the ref="scrollactive" property when you call the component in order to access the function as I do, or feel free to do it in any other way you would like, you just need to call the setScrollactiveItems() function.

确保在调用组件时设置ref="scrollactive"属性，以便像我一样访问该函数，或者随意以其他任何方式进行操作，只需调用setScrollactiveItems()函数。

组态 (Configuration)

All options should be passed as a prop in the <scrollactive> component as you can see in the example below:

如以下示例所示，所有选项都应作为prop传递给<scrollactive>组件：

<scrollactive
	active-class="active"
	:offset="80"
	:duration="800"
	bezier-easing-value=".5,0,.35,1">
</scrollactive>

Remember that all options are optional and you can see the default values in the Options sections.

请记住，所有选项都是可选的，您可以在“选项”部分中看到默认值。

选件 (Options)

/**
 * Class that will be applied in the menu item.
 *
 * @default  'is-active'
 * @type {String}
 */
activeClass: {
	type: String,
	default: 'is-active'
},
 
/**
 * Amount of space between top of screen and the section to
 * highlight. (Usually your fixed header's height)
 *
 * @default 20
 * @type {Number}
 */
offset: {
	type: Number,
	default: 20
},
 
/**
 * 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: {
	type: Boolean,
	default: true
},
 
/**
 * The duration (milliseconds) of the scroll animation when clicking to scroll
 * is activated.
 *
 * @default 600
 * @type {Number}
 */
duration: {
	type: Number,
	default: 600
},
 
/**
 * Defines if the plugin should track the section change when
 * clicking an item to scroll to its section. If set to true,
 * it will always keep track and change the active class to the
 * current section while scrolling, if false, 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: {
	type: Boolean,
	default: false
},
 
/**
 * 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.
 *
 * @default '.5,0,.35,1'
 * @type {String}
 */
bezierEasingValue: {
	type: String,
	default: '.5,0,.35,1'
}

翻译自: https://vuejsexamples.com/makes-simple-to-highlight-a-menu-item-with-an-active-class-as-you-scroll/

el 下拉菜单 显示滚动条