https://github.com/voxtobox/vue-scroll-stop

A tiny Vue directive that stop propagation scroll when edge reached
https://github.com/voxtobox/vue-scroll-stop

scroll scrolling vue vue-directive vue2 vuejs2

Last synced: 2 months ago
JSON representation

A tiny Vue directive that stop propagation scroll when edge reached

• Host: GitHub
• URL: https://github.com/voxtobox/vue-scroll-stop
• Owner: voxtobox
• Created: 2017-12-25T16:52:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-05-06T08:18:05.000Z (over 6 years ago)
• Last Synced: 2024-10-12T11:01:34.831Z (3 months ago)
• Topics: scroll, scrolling, vue, vue-directive, vue2, vuejs2
• Language: JavaScript
• Homepage:
• Size: 1.16 MB
• Stars: 41
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-scroll-stop

A tiny Vue directive that stop propagation scroll when edge reached.

Works with desktop `mousewheel` and mobile `touchmove` events

:white_check_mark: On | :x: Off 

------------- | -------------

![screenshot](vue-scroll-stop-on.gif)  | ![screenshot](vue-scroll-stop-off.gif)

## Sandbox

Want to try? [Here's a link](https://jsfiddle.net/voxtobox/9ghLbek8/).

## Installation

```javascript

npm i --save vue-scroll-stop

```

### Import

In main.js:

```javascript

import Vue from 'vue'

import VueScrollStop from 'vue-scroll-stop'

import App from './App.vue'

 

Vue.use(VueScrollStop)

 

new Vue({

  el: '#app',

  render: h => h(App)

})

```

### Browser

Include the script file, then install the component with `Vue.use(VueScrollStop);` e.g.:

```html

  Vue.use(VueScrollStop);

```

## Usage

Once installed, it can be used in a template as simply:

```html



```

By default directive works on both direction but you can strict it by using modifier v (vertical) or h (horizontal) 

```html

  

```


You can pass `false` as value to disable directive reactive

```html

 

```