# vue-scroll-check

> A simple component based on Vue.js. Detects if an element has scrolled to bottom, top or middle in itself.

Latest version **0.1.9** (published 2021-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-scroll-check
pnpm add vue-scroll-check
yarn add vue-scroll-check
bun add vue-scroll-check
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.9 |
| Published | 2021-04-01 |
| First published | 2020-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Maintainers | dgknca |
| Keywords | vue component, vue scroll, vue scroll detect, vue scroll bottom reach detect |

## Links

- npm: https://www.npmjs.com/package/vue-scroll-check
- Repository: https://github.com/dgknca/vue-scroll-check
- Homepage: https://github.com/dgknca/vue-scroll-check#readme
- Issues: https://github.com/dgknca/vue-scroll-check/issues
- npm.io page: https://npm.io/package/vue-scroll-check

## Recent versions

- 0.1.9 (latest) — 2021-04-01
- 0.1.8 — 2021-01-28
- 0.1.7 — 2020-11-09
- 0.1.5 — 2020-11-08
- 0.1.4 — 2020-11-08
- 0.1.3 — 2020-11-08
- 0.1.2 — 2020-11-08
- 0.1.1 — 2020-11-08
- 0.1.0 — 2020-11-08

## README

# vue-scroll-check

A simple component based on Vue.js. Detects if an element has scrolled to bottom, top or middle in itself.

## Demo

[Live Demo](https://dgknca.github.io/vue-scroll-check/) | [Codesandbox](https://codesandbox.io/s/vue-scroll-check-6b3x0)

### Install

[![NPM](https://nodei.co/npm/vue-scroll-check.png?downloads=true&downloadRank=true)](https://nodei.co/npm/vue-scroll-check/)

```bash
npm i vue-scroll-check
```

## Props

| Props           | Description                                          |  Type  | Default |
| :-------------- | :--------------------------------------------------- | :----: | :-----: |
| scrollAreaClass | Classes of the component's scrollable child element. | String |         |
| :threshold      | Threshold value of event change.                     | Number |    0    |

## Events

| Events        |
| :------------ |
| onBottomReach |
| onBottomLeave |
| onTopReach    |
| onTopLeave    |
| onMiddleEnter |
| onMiddleLeave |

## Usage

```html
<v-scroll-check
  scrollAreaClass="list"
  :threshold="100"
  @onBottomReach="onBottomReach"
  @onBottomLeave="onBottomLeave"
  @onTopReach="onTopReach"
  @onTopLeave="onTopLeave"
  @onMiddleEnter="onMiddleEnter"
  @onMiddleLeave="onMiddleLeave"
>
  <!-- Send your contents as slot -->
  <div class="item" v-for="i in 50" :key="i">Item {{ i }}</div>
</v-scroll-check>

<script>
  import VScrollCheck from 'vue-scroll-check'

  export default {
    components: {
      VScrollCheck
    },
    methods: {
      onBottomReach() {
        console.log('onBottomReach')
      },
      onBottomLeave() {
        console.log('onBottomLeave')
      },
      onTopReach() {
        console.log('onTopReach')
      },
      onTopLeave() {
        console.log('onTopLeave')
      },
      onMiddleEnter() {
        console.log('onMiddleEnter')
      },
      onMiddleLeave() {
        console.log('onMiddleLeave')
      }
    }
  }
</script>

<style>
  /* Don't forget that! The scrollAreaClass must be scrollable. */
  .list {
    height: 500px;
    overflow: auto;
  }
</style>
```

---
_Source: https://npm.io/package/vue-scroll-check · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._