A tiny Vue directive that stop propagation scroll when edge reached

Overview

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 -->
Issues
  • suggestion of usage

    suggestion of usage

    i believe the package mimics the main behavior of overscroll-behavior

    https://caniuse.com/#search=overscroll-behavior https://developers.google.com/web/updates/2017/11/overscroll-behavior

    so if u want maybe we can add those info to the readme or even extract the code to a separate lib so everyone can use it whether is using vue or not :+1:

    opened by ctf0 4
  • replace deprecated es2015 with env

    replace deprecated es2015 with env

    https://babeljs.io/docs/plugins/#official-presets

    Each yearly preset only compiles what was ratified in that year. babel-preset-env replaces es2015, es2016, es2017 and latest

    opened by ctf0 0
  • error passing tests

    error passing tests

    I am using this library and getting this error while unit testing

    PASS tests/unit/components/Records/Search/Input/SearchInput.spec.js ● Console

    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
      [Vue warn]: Failed to resolve directive: scroll-stop
      
      (found in <SearchInput>)
    

    PASS tests/unit/utils/stringUtils.spec.js

    Test Suites: 72 passed, 72 total Tests: 283 passed, 283 total Snapshots: 0 total Time: 9.238s Ran all test suites.

    opened by hoseinmirian 0
Owner
Volodymyr Antoniuk
Volodymyr Antoniuk
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 173 Nov 9, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 54 Nov 23, 2021
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 661 Nov 9, 2021
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 173 Nov 9, 2021
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 116 Mar 23, 2021
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 22 Oct 28, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Nov 23, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 181 Nov 20, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 502 Nov 23, 2021
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Yunwei Xiao 156 Nov 16, 2021
🎰 Scroll-in text component for Vue

Scroll-in text component for Vue 'vue-scrollin' is a Vue component that scrolls through various characters on mount before revealing the correct text.

William Lindvall 59 May 9, 2021
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
A simple scroll picker plugin for Vue 3

vue3-scroll-picker Vue 3 scroll picker plugin. Demo Demo Demo Code Install yarn add vue3-scroll-picker npm i --save vue3-scroll-picker Register Global

HJ 14 Oct 21, 2021
Infinite scroll component created with Vue & sass

Vue Infinite-Scroll component With Futurama Characters <3 Demo Link Also works for mobile devices Project setup npm install Compiles and hot-reloads

Larissa Avila 0 Jan 12, 2021
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 26 Oct 12, 2021
A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

vue-mobiscroll A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js Support swipping up / down, mouse dragging up / down , m

茶布多先生 15 Aug 17, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 60 Nov 5, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 80 Nov 6, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 502 Nov 23, 2021