https://github.com/victornpb/vue-plugin-scroll-into-view
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
https://github.com/victornpb/vue-plugin-scroll-into-view
plugin scroll vue vue-plugin
Last synced: 6 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/victornpb/vue-plugin-scroll-into-view
- Owner: victornpb
- License: mit
- Created: 2023-04-02T00:25:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-03T04:48:30.000Z (over 2 years ago)
- Last Synced: 2025-03-09T04:35:35.043Z (7 months ago)
- Topics: plugin, scroll, vue, vue-plugin
- Language: JavaScript
- Homepage: https://npmjs.com/package/vue-plugin-scroll-into-view
- Size: 472 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-plugin-scroll-into-view
[](LICENSE)
[](package.json)
[](https://www.codefactor.io/repository/github/victornpb/vue-plugin-scroll-into-view)
[](https://coveralls.io/github/victornpb/vue-plugin-scroll-into-view)
[](https://www.npmjs.com/package/vue-plugin-scroll-into-view)
[](https://www.npmjs.com/package/vue-plugin-scroll-into-view)
[](https://www.npmjs.com/package/vue-plugin-scroll-into-view)
[](https://www.npmjs.com/package/vue-plugin-scroll-into-view)
[](https://github.com/victornpb/vue-plugin-scroll-into-view/stargazers)
[](https://github.com/victornpb/vue-plugin-scroll-into-view/network/members)
[](https://github.com/victornpb/vue-plugin-scroll-into-view/discussions)
[](https://github.com/victornpb/vue-plugin-scroll-into-view/pulls?q=is%3Apr+is%3Aclosed)
[](https://github.com/victornpb/vue-plugin-scroll-into-view/issues?q=is%3Aissue+is%3Aclosed)
**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.
# Features
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
# Usage Examples
Inside your code you can do something like this:
## Basic usage
```html
Hello World
Next
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
},
}
}
```
# Installation
## [NPM](https://npmjs.com/package/vue-plugin-scroll-into-view)
```sh
npm install vue-plugin-scroll-into-view
```
## [Yarn](https://github.com/yarnpkg/yarn)
```sh
yarn add --dev vue-plugin-scroll-into-view
```
# Adding to your project
#### index.js
```js
import Vue from 'vue';
import VueScrollIntoView from 'vue-plugin-scroll-into-view';
Vue.use(VueScrollIntoView);
```
## Options
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 |
### Options example
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:
```js
this.$scrollIntoView('#my-section', { behavior: 'smooth', block: 'center' });
```
## License
The code is available under the [MIT](LICENSE) license.
## Contributing
We are open to contributions, see [CONTRIBUTING.md](CONTRIBUTING.md) for more info.
You need at least Node 18 to build the project