https://github.com/shwilliam/vue-visibility-trigger

👁 Declarative Vue component that emits an event when scrolled into view
https://github.com/shwilliam/vue-visibility-trigger

component scroll view visible vue

Last synced: 24 days ago
JSON representation

👁 Declarative Vue component that emits an event when scrolled into view

• Host: GitHub
• URL: https://github.com/shwilliam/vue-visibility-trigger
• Owner: shwilliam
• License: mit
• Created: 2018-10-14T09:33:47.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T05:59:07.000Z (about 2 years ago)
• Last Synced: 2024-11-26T02:24:55.097Z (about 1 month ago)
• Topics: component, scroll, view, visible, vue
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-visibility-trigger
• Size: 721 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-visibility-trigger

> Vue component that emits an event when scrolled into view



[![vue-visibility-trigger demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/qkyolorn6w?module=%2Fsrc%2FApp.vue)

## Installation

Install the package from npm by running

```

$ yarn add vue-visibility-trigger

```

or

```

$ npm i vue-visibility-trigger

```

## Usage

Import, register and place the component in your Vue app. Attach a function to react to the 'scrolledIn' event with 'v-on:scrolledIn="..."' or '@scrolledIn="..."'.

```

  ...

    

  ...

import VueVisibilityTrigger from 'vue-visibility-trigger'

export default {

  ...

  components: {

    VueVisibilityTrigger

  }

};

```

## Dev

Running dev and example scripts require @vue/cli and @vue/cli-service-global to be installed. Install globally by running `npm i --g @vue/cli @vue/cli-service-global` or `yarn add global vue/cli @vue/cli-service-global`