Skip to content
A tiny Vue directive that stop propagation scroll when edge reached
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
README.md
package-lock.json
package.json
vue-scroll-stop-off.gif
vue-scroll-stop-on.gif
webpack.config.js

README.md

vue-scroll-stop

A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events

On Off
screenshot screenshot

Sandbox

Want to try? Here's a link.

Installation

npm i --save vue-scroll-stop

Import

In main.js:

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.:

<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vue-scroll-stop/dist/vue-scroll-stop.min.js"></script>
<script type="text/javascript">
  Vue.use(VueScrollStop);
</script>

Usage

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

<div v-scroll-stop></div>

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

<div v-scroll-stop.h></div>  <!-- Works only for horizontal scroll -->

You can pass false as value to disable directive reactive

<div v-scroll-stop.h="false"></div> <!-- Directive disabled -->
You can’t perform that action at this time.