В этой статье мы рассмотрим простейший способ прокрутки к HTML элементу с помощью JavaScript, оформленный в виде Vue.js компонента.

Для решения задачи мы воспользуемся относительно новым экспериментальным API, а именно методом Element.scrollIntoView(). Несмотря на то, что API экспериментальный, самая базовая его поддержка есть даже в IE8 (список поддерживаемых браузеров).

Создадим новый Single File Component в файле ScrollToComponent.vue:

<template>
</template>

<script>
export default {
    name: 'scroll-to-component',
};
</script>

По задумке автора, этот компонент должен оборачивать любой участок кода и позволять по какому-либо событию прокрутить страницу к этому участку. Чтобы иметь возможность помещать HTML внутри компонента, добавим элемент slot внутри его шаблона:

<template>
    <slot/>
</template>

Теперь необходимо каким-то образом вывать ранее упомянутый метод Element.scrollIntoView() на содержимом компонента. Так как slot не является HTML элементом, требуется поместить его в какой-либо HTML элемент, например, span. Для нового элемента создадим ссылку (ref="component"), чтобы можно было к нему обраться в методе компонента scrollTo():

<template>
    <span ref="component">
        <slot/>
    </span>
</template>

<script>
export default {
    name: 'scroll-to-component',
    methods: {
        scrollTo () {
            this.$refs.component.scrollIntoView();
        },
    },
};
</script>

На данном этапе мы получили самую базовую версию компонента. Он уже будет выполнять свою основную функцию, но его можно улучшить путём добавление возможности передачи параметров скроллинга (подробности о которых можно узнать по ссылке в начале статьи) через свойста компонента:

<template>
    <span ref="component">
        <slot/>
    </span>
</template>

<script>
export default {
    name: 'scroll-to-component',
    props: {
        alignToTop: {
            required: false,
            default: null,
            type: Boolean,
        },
        options: {
            required: false,
            default: null,
            type: Object,
        },
    },
    methods: {
        scrollTo () {
            this.$refs.component.scrollIntoView(this.options !== null ? this.options : this.alignToTop);
        },
    },
};
</script>

Данный компонент внутри какого-то другого можно использовать следующим образом:

<template>
    <div>
        <button @click="scroll">Scroll to Element</button>
        <div style="height: 2000px;"/>
        <scroll-to-component ref="element">
            <h1>Element</h1>
        </scroll-to-component>
    </div>
</template>

<script>
import ScrollToComponent from "ScrollToComponent.vue";

export default {
    name: 'another-component',
    components: {
        ScrollToComponent,
    },
    methods: {
        scroll () {
            this.$refs.element.scrollTo();
        },
    },
};
</script>

comments powered by Disqus