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

virtual-scroll-handler

v1.12.2

Published

Virtual scrollbar, for when you need to handle scroll events without an actual DOM scrolling.

Downloads

22

Readme

virtual-scroll-handler

Allows you to handle scroll events in order to trigger and control animations, without having to deal with an actual DOM scrolling. This class creates a virtual scrollbar and is mobile friendly.

See it in action: https://atmos.leeroy.ca/

Install

npm i virtual-scroll-handler

Hello world

import virtualScrollHandler from 'virtual-scroll-handler'

let scroller = new virtualScrollHandler({
    range: [0, 2000],
    triggers: [{
        y: 1000,
        callback: () => {
            console.log("Callback triggered");
        }
    }]
});

(function loop() {
    requestAnimationFrame(loop);
    scroller.update();
})();

Options

range[min, max]

Min and max scroll edges.
A single mouse scroll down event will approximately increment the Y position by 100, so a range from 0 to 200 implies around 2 scroll events to hit the bottom of the virtual scrollbar.

startY

Y starting position within the provided range.
Default is 0.

lerpAmount

For each iteration of the linear interpolation, the amount to interpolate between the mouse position and the camera position. A smaller value will make the animation smoother.
Default is .1
Must be set between 0 and 1.

lerpAmountSwipe

Similar to lerpAmount but only affects swipe gestures for mobile devices. Default is lerpAmount * 4.

mobileSensibility

Controls the strength of a swipe on mobile devices.
Default is 1.

scrollbar

An object of options. If set to false, the default scrollbar creation will be disabled.
Else, will add a scrollbar in the DOM, before the closing </body> tag.

scrollbar.position

Defines the position of the scrollbar in the window.
Possible values are 'top', 'bottom', 'left' and 'right'.
Default is right.

scrollbar.width

Default is 6.

scrollbar.distanceFromEdge

Distance between the scrollbar and the edge of the viewport.
Default is 0.

scrollbar.customStyles

String.
Only active if createScrollbar is set to true.
Adds custom css styles to the DOM.
Note: Instances of virtual-scroll-handler are indexed with unique IDs starting from 0. This ID is referenced in the name of DOM classes and ids.
Example:

const scrollHandler = new virtualScrollHandler({
    range: [0, 1000],
    scrollbar: {
        customStyles: `.vsh-scrollbar-0 {  /* <- this is the first instance, so the id is 0 */
                ...
            }`
    }
});

fadeOutDelay

Time in ms after which the scrollbar will fadeout once it has stopped moving. Default is false.

handleSize

Size of the scroll bar handle in percent of the viewport height. Default is .1, since by default, the handle take 10% of the viewport height.

triggers

Array of objects.
This is where you declare when and what is going to happen.
Each trigger is an object made of these options:

y

The Y position value which will trigger the action when reached.

condition

Default is >y, meaning that the callback is triggered when the current virtual scroll position is above the y trigger value.

callback

The callback function to trigger.

once

Default is false.
If set to true, the callback function will only be triggered once.

Properties

completion

Returns a number between 0 and 1.

let scroller = new scrollHandler({
    range: [0, 2000]
});

console.log(scroller.completion);

deltaY

The difference between the current Y position and the previous one.

active

Default is true.
If set to false, the scroll is disabled.

domElements

An object containing:
.scrollbar: the DOM element of the whole scrollbar and its children
.handle: the part of the scrollbar that moves vertically

scroller.domElements.scrollbar.style.opacity = 0;

Methods

goTo( distance: number, animated: bool)

Scroll to a point in the range of the scroller.
The 'animated' parameter makes the scroll instant or animated. Default is true.

scroller.goTo( 500, false );

setHandleSize( size: number)

Sets the size of the scrollbar handle as a percentage.

scroller.setHandleSize( .2 ); // The handle will take up 20% of the scrollbar

Example

import scrollHandler from 'virtual-scroll-handler'

new scrollHandler({
    range: [0, 2000],
    startY: 0,
    triggers: [{
        y: 1000,
        condition: '<y',
        callback: () => {
            console.log("Callback triggered");
        },
        once: true
    }],
    createScrollbar: true,
    customScrollbarStyles: `.vsh-scrollbar { mix-blend-mode: difference; }`,
    fadeOutDelay: 500
});

(function loop() {
    requestAnimationFrame(loop);
    scroller.update();
    console.log(scroller.completion);
})();