A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

Overview

vue-mobiscroll

A light-weight flexible Scroll Picker similiar to Mobiscroll built with Vue.js

Support swipping up / down, mouse dragging up / down , mouse scrolling up / down.

how to use it?

git clone https://github.com/nelsonkuang/vue-mobiscroll.git
cd vue-mobiscroll
npm install
# watch:
npm run dev
# build:
npm run build

then run npm run dev and check the page on http://localhost:8080/

or live demo below:

One Scroller

Todo:

Add mouse dragging effect.

Add more examples.

Add scroll triggering options changing.

v1.0.0 (2017-03-23)

Issues
  • Bump eslint from 3.19.0 to 4.19.1

    Bump eslint from 3.19.0 to 4.19.1

    Bumps eslint from 3.19.0 to 4.19.1.

    Release notes

    Sourced from eslint's releases.

    v4.19.1

    • 3ff5d11 Fix: no-invalid-regexp not understand variable for flags (fixes #10112) (#10113) (薛定谔的猫)
    • abc765c Fix: object-curly-newline minProperties w/default export (fixes #10101) (#10103) (Kevin Partington)
    • 6f9e155 Docs: Update ambiguous for...in example for guard-for-in (#10114) (CJ R)
    • 0360cc2 Chore: Adding debug logs on successful plugin loads (#10100) (Kevin Partington)
    • a717c5d Chore: Adding log at beginning of unit tests in Makefile.js (#10102) (Kevin Partington)

    v4.19.0

    • 55a1593 Update: consecutive option for one-var (fixes #4680) (#9994) (薛定谔的猫)
    • 8d3814e Fix: false positive about ES2018 RegExp enhancements (fixes #9893) (#10062) (Toru Nagashima)
    • 935f4e4 Docs: Clarify default ignoring of node_modules (#10092) (Matijs Brinkhuis)
    • 72ed3db Docs: Wrap Buffer() in backticks in no-buffer-constructor rule description (#10084) (Stephen Edgar)
    • 3aded2f Docs: Fix lodash typos, make spacing consistent (#10073) (Josh Smith)
    • e33bb64 Chore: enable no-param-reassign on ESLint codebase (#10065) (Teddy Katz)
    • 66a1e9a Docs: fix possible typo (#10060) (Vse Mozhet Byt)
    • 2e68be6 Update: give a node at least the indentation of its parent (fixes #9995) (#10054) (Teddy Katz)
    • 72ca5b3 Update: Correctly indent JSXText with trailing linebreaks (fixes #9878) (#10055) (Teddy Katz)
    • 2a4c838 Docs: Update ECMAScript versions in FAQ (#10047) (alberto)

    v4.18.2

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    • 777283b Docs: Propose fix typo for function (#9965) (John Eismeier)
    • bf3d494 Docs: Fix typo in max-len ignorePattern example. (#9956) (Tim Martin)
    • d64fbb4 Docs: fix typo in prefer-destructuring.md example (#9930) (Vse Mozhet Byt)
    • f8d343f Chore: Fix default issue template (#9946) (Kai Cataldo)
    ... (truncated)
    Changelog

    Sourced from eslint's changelog.

    v4.19.1 - March 21, 2018

    • 3ff5d11 Fix: no-invalid-regexp not understand variable for flags (fixes #10112) (#10113) (薛定谔的猫)
    • abc765c Fix: object-curly-newline minProperties w/default export (fixes #10101) (#10103) (Kevin Partington)
    • 6f9e155 Docs: Update ambiguous for...in example for guard-for-in (#10114) (CJ R)
    • 0360cc2 Chore: Adding debug logs on successful plugin loads (#10100) (Kevin Partington)
    • a717c5d Chore: Adding log at beginning of unit tests in Makefile.js (#10102) (Kevin Partington)

    v4.19.0 - March 16, 2018

    • 55a1593 Update: consecutive option for one-var (fixes #4680) (#9994) (薛定谔的猫)
    • 8d3814e Fix: false positive about ES2018 RegExp enhancements (fixes #9893) (#10062) (Toru Nagashima)
    • 935f4e4 Docs: Clarify default ignoring of node_modules (#10092) (Matijs Brinkhuis)
    • 72ed3db Docs: Wrap Buffer() in backticks in no-buffer-constructor rule description (#10084) (Stephen Edgar)
    • 3aded2f Docs: Fix lodash typos, make spacing consistent (#10073) (Josh Smith)
    • e33bb64 Chore: enable no-param-reassign on ESLint codebase (#10065) (Teddy Katz)
    • 66a1e9a Docs: fix possible typo (#10060) (Vse Mozhet Byt)
    • 2e68be6 Update: give a node at least the indentation of its parent (fixes #9995) (#10054) (Teddy Katz)
    • 72ca5b3 Update: Correctly indent JSXText with trailing linebreaks (fixes #9878) (#10055) (Teddy Katz)
    • 2a4c838 Docs: Update ECMAScript versions in FAQ (#10047) (alberto)

    v4.18.2 - March 2, 2018

    • 6b71fd0 Fix: [email protected], because 4.0.3 needs "ajv": "^6.0.1" (#10022) (Mathieu Seiler)
    • 3c697de Chore: fix incorrect comment about linter.verify return value (#10030) (Teddy Katz)
    • 9df8653 Chore: refactor parser-loading out of linter.verify (#10028) (Teddy Katz)
    • f6901d0 Fix: remove catastrophic backtracking vulnerability (fixes #10002) (#10019) (Jamie Davis)
    • e4f52ce Chore: Simplify dataflow in linter.verify (#10020) (Teddy Katz)
    • 33177cd Chore: make library files non-executable (#10021) (Teddy Katz)
    • 558ccba Chore: refactor directive comment processing (#10007) (Teddy Katz)
    • 18e15d9 Chore: avoid useless catch clauses that just rethrow errors (#10010) (Teddy Katz)
    • a1c3759 Chore: refactor populating configs with defaults in linter (#10006) (Teddy Katz)
    • aea07dc Fix: Make max-len ignoreStrings ignore JSXText (fixes #9954) (#9985) (Rachael Sim)

    v4.18.1 - February 20, 2018

    • f417506 Fix: ensure no-await-in-loop reports the correct node (fixes #9992) (#9993) (Teddy Katz)
    • 3e99363 Docs: Fixed typo in key-spacing rule doc (#9987) (Jaid)
    • 7c2cd70 Docs: deprecate experimentalObjectRestSpread (#9986) (Toru Nagashima)

    v4.18.0 - February 16, 2018

    • 70f22f3 Chore: Apply memoization to config creation within glob utils (#9944) (Kenton Jacobsen)
    • 0e4ae22 Update: fix indent bug with binary operators/ignoredNodes (fixes #9882) (#9951) (Teddy Katz)
    • 47ac478 Update: add named imports and exports for object-curly-newline (#9876) (Nicholas Chua)
    • e8efdd0 Fix: support Rest/Spread Properties (fixes #9885) (#9943) (Toru Nagashima)
    • f012b8c Fix: support Async iteration (fixes #9891) (#9957) (Toru Nagashima)
    • 74fa253 Docs: Clarify no-mixed-operators options (fixes #9962) (#9964) (Ivan Hayes)
    • 426868f Docs: clean up key-spacing docs (fixes #9900) (#9963) (Abid Uzair)
    • 4a6f22e Update: support eslint-disable-* block comments (fixes #8781) (#9745) (Erin)
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump webpack-bundle-analyzer from 2.13.1 to 3.7.0

    Bump webpack-bundle-analyzer from 2.13.1 to 3.7.0

    Bumps webpack-bundle-analyzer from 2.13.1 to 3.7.0.

    Release notes

    Sourced from webpack-bundle-analyzer's releases.

    First test with Lerna monorepo

    th0r/webpack-bundle-analyzer#98

    Changelog

    Sourced from webpack-bundle-analyzer's changelog.

    3.7.0

    • New Feature

      • Added JSON output option (analyzerMode: "json" in plugin, --mode json in CLI) (#341 by @Gongreg)
    • Improvement

      • Persist "Show content of concatenated modules" option (#322 by @lorenzos)

    3.6.1

    • Bug Fix

      • Add leading zero to hour & minute on <title /> when needed (#314 by @mhxbe)
    • Internal

      • Update some dependencies to get rid of vulnerability warnings (#339)

    3.6.0

    • Improvement
      • Support webpack builds where output.globalObject is set to 'self' (#323 by @lemonmade)
      • Improve readability of tooltips (#320 by @lorenzos)

    3.5.2

    • Bug Fix

    3.5.1

    • Bug Fix
      • Fix regression in support of webpack dev server and webpack --watch (issue #312, fixed in #313 by @gaokun)

    3.5.0

    • Improvements
      • Improved report title and added favicon (#310, @gaokun)

    3.4.1

    • Bug Fix
      • Fix regression of requiring an object to be passed to new BundleAnalyzerPlugin() (issue #300, fixed in #302 by @jerryOnlyZRJ)

    3.4.0

    ... (truncated)
    Commits
    • 06e6b39 v3.7.0
    • 250fd73 Add changelog entry about JSON output option
    • 29beb70 Merge pull request #322 from lorenzos/concatenated-local-storage
    • f8f4049 Update CHANGELOG.md
    • 6afb159 Merge remote-tracking branch 'upstream/master' into concatenated-local-storage
    • acf2d1c Added JSON output to the cli and webpack plugin (#341)
    • 660dba6 v3.6.1
    • 387d7f9 Merge pull request #339 from webpack-contrib/update-some-deps
    • e90b3b1 Downgrade terser-webpack-plugin because v2 requires at least Node v8.9
    • 45ffbf9 Update some dependencies to get rid of vulnerability warnings
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
茶布多先生
Currently Focusing on Webgl & 图形学
茶布多先生
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 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 167 Oct 12, 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 13 Sep 10, 2021
Vue3.0 无缝滚动组件

vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

null 15 Oct 7, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 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 169 Oct 14, 2021
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Oct 1, 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
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 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 57 Sep 30, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 90 Oct 12, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 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 20 Sep 30, 2021
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 5 Sep 22, 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 Oct 12, 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 52 Aug 12, 2021
A tiny Vue directive that stop propagation scroll when edge reached

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

Volodymyr Antoniuk 42 Aug 2, 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 494 Oct 12, 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 Oct 12, 2021