Vue Component for make a fake scroll

Overview

vue-fake-scroll

Vue Component for creating fake scroll. Sometimes you only need to create scroll area without actually scrolling the content (fixed) and you use the scroll data to move another thing. This is what you need!

See here the Demo

Installation

npm install --save vue-fake-scroll

or

yarn add vue-fake-scroll

Import

Global Registration

import Vue from 'vue'
import VueFakeScroll from 'vue-fake-scroll'

Vue.component('vue-fake-scroll', VueFakeScroll)

In Component Registration:

<template>
  ...
template>
<script>
import VueFakeScroll from 'vue-fake-scroll'

export default {
  name: 'YourComponentName',
  components: {
    VueFakeScroll,
    ...
  },
  ...
}
script>

Not Using Webpack

If you don't use webpack (for example in CodePen etc):

">
<link rel="stylesheet" href="node-modules/vue-fake-scroll/dist/vue-fake-scroll.css" />
<script src="node-modules/vue-fake-scroll/dist/vue-fake-scroll.umd.js">script>

or use unpkg

">
<link rel="stylesheet" href="https://unpkg.com/vue-fake-scroll/dist/vue-fake-scroll.css" />
<script src="https://unpkg.com/vue-fake-scroll/dist/vue-fake-scroll.umd.js">script>

and then you still need to register it:

Vue.component('vue-fake-scroll', VueFakeScroll)

Basic Usage

You need to set up the virtual scroll area size.

For example: The scroll area needs to be 2000 x 3000 inside 100 x 200 window. You need to set property of VueFakeScroll :scroll-width="2000" and :scroll-height="3000". You need also to resize the component to 100 x 200 with CSS.

... ">
<template>
  <VueFakeScroll class="scroll" :scroll-width="2000" :scroll-height="3000">
    ...
  VueFakeScroll>
template>

<style scoped>
.scroll {
  width: 100px;
  height: 200px;
}
style>

Use The Data

So you need to get the scroll data, you can do it with listening the @update event. The @update event will fire when:

  • The user scroll
  • scrollTop or scrollLeft of the element (not the component) changed programmatically
  • The scrollWidth or scrollHeight of the component (not the element) changed by binding
  • The element changed size because of css (change in pixel, so if it's in percentage, if the parent change, it will change too). Size change detection using (vue-resize)[https://github.com/Akryum/vue-resize] component.

The object passed to the event contains these infos:

  • scrollLeft: how far horizontal space scrolled in pixel
  • scrollTop: how far vertical space scrolled in pixel
  • scrollWidth: the total scrollable area width
  • scrollHeight: the total scrollable area height
  • clientWidth: the viewing window width (vertical scrollbar not included), could be smaller than the css
  • clientHeight: the viewing window height (horizontal scrollbar not included), could be smaller than the css
  • scrollLeftMax: the maximum value for scrollLeft, it's calculated by scrollWidth - clientWidth
  • scrollTopMax: the maximum value for scrollTop, it's calculated by scrollHeight - clientHeight
  • scrollLeftInterval: how far horizontal space scrolled in range from 0 to 1, it's calculated by scrollLeft / scrollLeftMax
  • scrollTopInterval: how far vertical space scrolled in range from 0 to 1, it's calculated by scrollTop / scrollTopMax

Example:

{{scrollLeftInterval}} - {{scrollTopInterval}} ">
<template>
  <VueFakeScroll 
    :scroll-width="scrollWidth" 
    :scroll-height="scrollHeight"
    :style="{width: width+'px', height: height+'px'}"
    @update="handleUpdate">
    {{scrollLeftInterval}} - {{scrollTopInterval}}
  VueFakeScroll>
template>

<script>
import VueFakeScroll from 'vue-fake-scroll'
export default {
  data() {
    return {
      scrollWidth: 2000,
      scrollHeight: 3000,
      width: 200,
      height: 200,
      scrollLeftInterval: 0,
      scrollTopInterval: 0,
    }
  },
  methods: {
    handleUpdate(e) {
      this.scrollLeftInterval = e.scrollLeftInterval
      this.scrollTopInterval = e.scrollTopInterval
    }
  }
}
script>

Example

See the Demo and the corresponding code

Caveats

You can style the component with the margin and border, but please don't style it with padding, because it behaves a little bit different than regular div. If you need a padding, just make a div as a direct child of this component, and set the width and height to 100% and then you can put the padding in this div.

Example:

... another child here
">
<template>
  <VueFakeScroll class="outer" :scroll-width="1000" :scroll-height="1000">
    <div class="inner">
      ... another child here
    div>
  VueFakeScroll>
template>
<style scoped>
.outer {
  width: 400px;
  height: 400px;
  margin: 50px;
  border: 10px;
}
.inner {
  padding: 50px;
}
style>
You might also like...
Infinite scroll component created with Vue & sass
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

A super simple Vue component that allows fullscreen and horizontal scroll snapping.
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

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

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

Vue component to easily setup scroll-driven interactions (aka scrollytelling)
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

Scroll to page top button, Vue.js component.

vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser script src="vue.js"/script script src="vue-go-top.min.js"/scr

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

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,

⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level.

A simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome simple-scrollbar

Jonathan Bakebwa 13 Nov 10, 2022
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 118 Nov 6, 2022
Vue-loadmore - A pull-down refresh and pull-up loadmore scroll component for Vue.js

vuejs-loadmore A pull-down refresh and pull-up loadmore scroll component for Vue

staticdeng 56 Oct 26, 2022
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 26 Jul 15, 2022
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 183 Nov 17, 2022
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 533 Nov 20, 2022
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 57 Mar 2, 2022
🎰 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 61 Feb 16, 2022
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021