Инструмент, который поможет Вам легко создать плавную прокрутку к указанному элементу на странице. Поддержка как в виде директивы, так и прямого применения в коде.
Описание плагина
vue-scrollto использует window.requestAnimationFrame для выполнения анимации, тем самым давая лучшую производительность. Плавность выполняется с помощью bezier-easing — хорошо протестированной облегчающей микро-библиотеки. Инструмент даже знает, когда пользователь прерывает прокрутку, что приводит к хорошему UX.
Установка
|
1 |
npm install --save vue-scrollto |
Или непосредственно включить его в html:
|
1 2 |
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script> |
Использование
vue-scrollto может использоваться как директива vue, так и программно из javascript.
Как директива vue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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, force: true, cancelable: true, onStart: false, onDone: false, onCancel: false, x: false, y: true }) |
В случае, если вы используете версию браузера (непосредственно включая скрипт на Вашей странице), вы можете установить значения по умолчанию с помощью:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
VueScrollTo.setDefaults({ container: "body", duration: 500, easing: "ease", offset: 0, force: true, cancelable: true, onStart: false, onDone: false, onCancel: false, x: false, y: true }) |
|
1 2 3 4 5 |
<a href="#" v-scroll-to="'#element'">Scroll to #element</a> <div id="element"> Hi. I'm #element. </div> |
Если необходимо настроить параметры прокрутки, можно передать в директиву литерал объекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<a href="#" v-scroll-to="{ el: '#element', container: '#container', duration: 500, easing: 'linear', offset: -200, force: true, cancelable: true, onStart: onStart, onDone: onDone, onCancel: onCancel, x: false, y: true }"> Scroll to #element </a> |
Программно
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var VueScrollTo = require('vue-scrollto'); var options = { container: '#container', easing: 'ease-in', offset: -60, force: true, cancelable: true, onStart: function(element) { // scrolling started }, onDone: function(element) { // scrolling is done }, onCancel: function() { // scrolling has been interrupted }, x: false, y: true } 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() |
На этому все. Использование плагина не составляет труда. Дополнительное описание параметров можно найти на странице источника.