npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-fake-scroll

v1.0.3

Published

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!

Downloads

52

Readme

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:

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

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