Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kholid060/v-intersect
Detect when an element is visible or hidden on user viewport
https://github.com/kholid060/v-intersect
hacktoberfest intersection-observer vue vue-component vue-directive vuejs
Last synced: about 1 month ago
JSON representation
Detect when an element is visible or hidden on user viewport
- Host: GitHub
- URL: https://github.com/kholid060/v-intersect
- Owner: Kholid060
- Created: 2020-01-18T11:01:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-23T06:00:48.000Z (over 1 year ago)
- Last Synced: 2024-01-29T09:46:09.356Z (4 months ago)
- Topics: hacktoberfest, intersection-observer, vue, vue-component, vue-directive, vuejs
- Language: JavaScript
- Homepage: https://kholid060.github.io/v-intersect/
- Size: 658 KB
- Stars: 11
- Watchers: 3
- Forks: 4
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Lists
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
- awesome-vue - v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport (Components & Libraries / UI Utilities)
README
# V-Intersect
**Detect when element is visible or hidden on user viewport**
## Demo
[Demo](https://kholid060.github.io/v-intersect/)
## Installation
#### NPM
```javascript
npm install v-intersect --save
```
#### Yarn
```javascript
yarn add v-intersect
```
Install the plugin into your Vue project:
```javascript
import Vue from 'vue'
import VIntersect from 'v-intersect'
Vue.use(VIntersect)
```
or use the component and directive directly:
```javascript
import Vue from 'vue'
import { VIntersectComp, VIntersectDir } from 'v-intersect'
Vue.directive('intersect', VIntersectDir)
Vue.component('v-intersect', VIntersectComp)
```
## Usage
### Directive
```html
...
```
The function will be called when the visibility of the element is changes.
```javascript
onIntersect(observer){
this.isVisible = observer.isIntersecting
console.log(observer.entries)
}
```
- `isIntersecting`: when it's `true` it means the element is visible on the screen, and `false` means it's hidden
- `entries`: [IntersectionObserverEntry](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
And if you want the function only called when element is visible you can use `.enter` modifier.
``` html
...
```
### Options
```html
```
For more details [IntersectionObserver Options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#Parameters)
### Once
It will called the function once when the element is visible
```html
```
### Disabling the observer
```html
```
### Component
```html
...
```
### Events
| Name | Description |
|---|---|
| **change** | event fired when visibility of the element change |
| **enter** | event fired when the element is intersect (visible) on the screen|
| **once** | event fired once when the elemnt is visible |
### Props
| Name | Type | Default | Description |
|---|---|---|---|
| **root** | String | ' ' | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
| **rootMargin** | String | '0px' | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options) |
| **threshold** | [Array, Number] | 0 | [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)|
| **disabled** | Boolean | false | Disable the observer |
**Note**: for `root` prop, you need to pass the element class or id i.e `.content` or `#content`
## Polyfill
This plugin uses The IntersectionObserver API, and currently it is not available in all browsers [(IE11, Safari and iOS Safari)](http://caniuse.com/#feat=intersectionobserver). If you intend to support these browsers, you can include [WICG IntersectionObserver Polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to your bundle.