Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

Related tags

vue scroll zoom
Overview

vue-pinch-scroll-zoom

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

example:

https://vue-pinch-scroll-zoom.coddicat.com/

Installation

npm i @coddicat/vue-pinch-scroll-zoom

Usage

template:

<PinchScrollZoom
  ref="zoomer"
  :width="300"
  :height="400"
  :scale="scale"
  @scaling="scalingHandler"
  style="border: 1px solid black"
>
  <img src="https://picsum.photos/600/1000" width="300" height="400" />
</PinchScrollZoom>

type script:

import { Component, Vue } from "vue-property-decorator";
import PinchScrollZoom, { PinchScrollZoomEmitData } from "@coddicat/vue-pinch-scroll-zoom";

@Component({
  name: "PinchScrollZoomExample",
  components: {
    PinchScrollZoom
  }
})
export default class PinchScrollZoomExample extends Vue {
  private scale = 2;
  public scalingHandler(e: PinchScrollZoomEmitData): void {
    console.log(e);
  },
  public reset() {
    (this.$refs.zoomer as PinchScrollZoom).setData({
      scale: 1,
      originX: 0,
      originY: 0,
      translateX: 0,
      translateY: 0        
    });
  }
}

Props

the following properties don't support the ".async" modifier

name required description default
width yes visible area width
height yes visible area height
contentWidth no should be defined when content width larger than container width
contentHeight no should be defined when content height larger than container height
minScale no minimum allowable scaling 0.3
maxScale no maximum allowable scaling 5
within no limit scrolling of content to its borders true
wheelVelocity no zoom velocity when mouse wheel 0.001
scale no scale of the content 1
origin-x no transform-origin-x width/2
origin-y no transform-origin-y height/2
translate-x no transform: translateX 0
translate-y no transform: translateY 0
throttleDelay no rendering delay (milliseconds) 25
draggable no draggable of/off true

Events

the following events are emitted with the argument:

export interface PinchScrollZoomEmitData {
  x: number;
  y: number;
  scale: number;
  originX: number;
  originY: number;
  translateX: number;
  translateY: number;  
}
  • startDrag
  • stopDrag
  • dragging
  • scaling

Methods

.SetData(data: PinchScrollZoomSetData);

export interface PinchScrollZoomSetData {
    scale: number;
    originX: number;
    originY: number;
    translateX: number;
    translateY: number;
}
Issues
Owner
CoddiCat
CoddiCat
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
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
null 1 Oct 8, 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
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 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 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
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
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
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 Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Haojen 8 Oct 10, 2021
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

sos 1.3k 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
Wrapper to use the awesome scrollMonitor with [email protected]

VueScrollmonitor Handle scroll events like a boss Wrapper to use the awesome scrollMonitor with [email protected] To know more : https://github.com/stutrek/sc

Alexandre Bonaventure Geissmann 44 May 7, 2021
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 149 Sep 13, 2021
Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Vue Scrollama A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood. The best way to understa

Vignesh Shenoy 351 Oct 13, 2021
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Ivo Dolenc 4 Oct 1, 2021
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 393 Sep 28, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021