vue-scroll-into-view is a simple lightweight (0.3KB) Vue.js plugin that provides a convenient way to scroll an element into view with just a single line of code
MIT License
vue-scroll-into-view is a simple Vue.js plugin that provides a convenient way to scroll an element into view with just a single line of code. Whether you have a long page with many sections, or you need to navigate to a specific part of the page, this plugin makes it easy to do so.
Scrolls an element into the visible area of the browser window
Supports scrolling to an element by $refs
, selector
, VNode
, or HTMLElement
Allows for customization of scroll options, such as animation and alignment
Easy to install and use in your Vue.js 2 or 3 project
Inside your code you can do something like this:
<template>
<div>
<h1>Hello World</h1>
<table ref="table">
<!-- long content -->
</table>
<button @click="nextPage"> Next </button>
</div>
</template>
<script>
export default {
methods: {
nextPage() {
// await requestNextPage();
// scroll to top of the table
this.$scrollIntoView(this.$refs.table); // refs or VNodes
this.$scrollIntoView('div > table'); // CSS Selectors
},
}
}
</script>
npm install vue-plugin-scroll-into-view
yarn add --dev vue-plugin-scroll-into-view
import Vue from 'vue';
import VueScrollIntoView from 'vue-plugin-scroll-into-view';
Vue.use(VueScrollIntoView);
this.$scrollIntoView(ref, options);
Option | Type | Description | Default value |
---|---|---|---|
behavior | String | Defines the transition animation. One of "auto" or "smooth". | "auto" |
block | String | Defines vertical alignment. One of "start", "center", "end", or "nearest". | "start" |
inline | String | Defines horizontal alignment. One of "start", "center", "end", or "nearest". | "nearest" |
scrollMode | String | Defines the scrolling mode. One of "always", "if-needed", or "never". | "always" |
skipOverflowHiddenElements | Boolean | Whether to skip scrolling the ancestor elements with overflow: hidden. | false |
allowHorizontalScroll | Boolean | Whether to allow horizontal scrolling if the element is wider than the viewport. | false |
force | Boolean | Whether to always scroll the element, even if it's already in view. | false |
This will scroll the element with the ID my-section into view with default scroll options. You can also pass in custom scroll options if desired:
this.$scrollIntoView('#my-section', { behavior: 'smooth', block: 'center' });
The code is available under the MIT license.
We are open to contributions, see CONTRIBUTING.md for more info.
You need at least Node 18 to build the project