Nashville Plays Music

    vue-scroll-stop

    0.1.5 • Public • Published

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

    Keywords

    none

    Install

    npm i vue-scroll-stop

    DownloadsWeekly Downloads

    233

    Version

    0.1.5

    License

    MIT

    Last publish

    Collaborators

    • voxtobox