vue侦听局部元素滚动_添加一个指令，该指令侦听单击事件并滚动到元素

vue侦听局部元素滚动

Vue滚动 (vue-scrollto)

Scrolling to elements was never this easy!

滚动到元素从未如此简单！

Scroll to any element on page,Scroll inside any container,Customize how scrolling behaves.

滚动到页面上的任何元素，在任何容器内滚动，自定义滚动行为。

现场演示 (Live Demo)

https://rigor789.github.io/vue-scrollto/#/

https://rigor789.github.io/vue-scrollto/#/

This is for vue 2.x

这适用于vue 2.x

For vue 1.x use [email protected] (note the capital T) but keep in mind that the old version depends on jquery.

对于vue 1.x使用[email protected] (注意大写字母T)，但请记住，旧版本取决于jquery 。

引擎盖下 (Under the hood)

vue-scrollto uses window.requestAnimationFrame to perform the animations, thus giving the best performance.

vue-scrollto使用window.requestAnimationFrame来执行动画，从而提供最佳性能。

Easing is done using bezier-easing - A well tested easing micro-library.

轻松使用贝塞尔曲线缓动完成-经过良好测试的缓动微库。

It even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.

它甚至知道用户何时中断，并且不会强制滚动而导致不良的UX。

正在安装 (Installing)

This package is available on npm.

该软件包可在npm上获得。

If you used this package before, please ensure you are using the right one, since it has been renamed from `vue-scrollTo` to `vue-scrollto`

如果您以前使用过此软件包，请确保您使用的是正确的软件包，因为它已从“ vue-scrollTo”重命名为“ vue-scrollto”

Using npm:

使用npm：

npm install --save vue-scrollto

Using yarn:

使用纱线：

yarn add vue-scrollto

Directly include it in html:

直接将其包含在html中：

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-scrollto"></script>

When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!

当将其包含在html中时，它将自动调用`Vue.use`并设置一个`VueScrollTo`变量供您使用！

用法 (Usage)

vue-scrollto can be used either as a vue directive, or programatically from your javascript.

vue-scrollto既可以用作vue指令，也可以从JavaScript中以编程方式使用。

作为vue指令 (As a vue directive)

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

// You can also pass in the default options
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     cancelable: true,
     onDone: false,
     onCancel: false,
     x: true,
     y: false
 })

In case you are using the browser version (directly including the script on your page), you can set the defaults with

如果您使用的是浏览器版本(直接在页面上包含脚本)，则可以使用

VueScrollTo.setDefaults({
    container: "body",
    duration: 500,
    easing: "ease",
    offset: 0,
    cancelable: true,
    onDone: false,
    onCancel: false,
    x: true,
    y: false
})

<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
    Hi. I'm #element.
</div>

If you need to customize the scrolling options, you can pass in an object literal to the directive:

如果需要自定义滚动选项，可以将对象文字传递给指令：

<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     easing: 'linear',
     offset: -200,
     cancelable: true
     onDone: onDone,
     onCancel: onCancel,
     x: true,
     y: false
 }">
    Scroll to #element
</a>

Check out the [Options Section](#options) for more details about the available options.

请查看[选项部分](＃options)，以获取有关可用选项的更多详细信息。

以编程方式 (Programatically)

var VueScrollTo = require('vue-scrollto');

var options = {
    container: '#container',
    easing: 'ease-in',
    offset: -60,
    cancelable: true,
    onDone: function() {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    },
    x: true,
    y: false
}

var cancelScroll = VueScrollTo.scrollTo(element, duration, options)

// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)

// to cancel scrolling you can call the returned function
cancelScroll()

选件 (Options)

el /元素 (el / element)

The element you want to scroll to.

您要滚动到的元素。

容器 (container)

The container that has to be scrolled.

必须滚动的容器。

Default: body

默认值： body

持续时间 (duration)

The duration (in milliseconds) of the scrolling animation.

滚动动画的持续时间(以毫秒为单位)。

Default: 500

默认值： 500

缓和 (easing)

The easing to be used when animating. Read more in the Easing section.

动画时要使用的缓动。 在“ 轻松”部分中了解更多信息。

Default: ease

默认值： ease

抵消 (offset)

The offset that should be applied when scrolling.

滚动时应应用的偏移量。

Default: 0

默认值： 0

可取消 (cancelable)

Indicates if user can cancel the scroll or not.

指示用户是否可以取消滚动。

Default: true

默认值： true

onDone (onDone)

A callback function that should be called when scrolling has ended.

滚动结束时应调用的回调函数。

Default: noop

默认值： noop

onCancel (onCancel)

A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.).

用户中止滚动时应调用的回调函数(用户滚动，单击等)。

Default: noop

默认值： noop

X (x)

Whether or not we want scrolling on the x axis

我们是否要在x轴上滚动

Default: true

默认值： true

ÿ (y)

Whether or not we want scrolling on the y axis

是否要在y轴上滚动

Default: false

默认值： false

缓和 (Easing)

Easing is calculated using bezier-easing so you can pass your own values into options.easing in the form of an array with 4 values, or you can use any of the default easings by referencing their names as strings (ease, linear, ease-in, ease-out, ease-in-out).

缓和是使用bezier-easing来计算的，因此您可以将自己的值传递给options.easing ，以具有4个值的数组的形式出现，或者您可以通过将其名称引用为字符串来使用任何默认ease ( ease-in ， linear ， ease-in ， ease-out ， ease-in-out )。

vue-scrollto uses the following values for the default easings:

vue-scrollto使用以下值作为默认缓动：

let easings = {
    'ease': [0.25, 0.1, 0.25, 1.0],
    'linear': [0.00, 0.0, 1.00, 1.0],
    'ease-in': [0.42, 0.0, 1.00, 1.0],
    'ease-out': [0.00, 0.0, 0.58, 1.0],
    'ease-in-out': [0.42, 0.0, 0.58, 1.0]
}

翻译自: https://vuejsexamples.com/adds-a-directive-that-listens-for-click-events-and-scrolls-to-elements/

vue侦听局部元素滚动