Better scroll event management using requestAnimationFrame.

James Tomasino

Last update: Feb 12, 2022

Related tags

Overview

Scroll Frame

Better scroll event management using requestAnimationFrame.

Install

npm install @jamestomasino/scroll-frame

Use

const { addScrollListener, removeScrollListener } = require('@jamestomasino/scroll-frame');


function onMove() {
  console.log('moving')
}

addScrollListener(onMove) // onMove will be called upon scroll

removeScrollListener(onMove) // onMove will no longer be called upon scroll

Details

scroll-frame sets up one master requestAnimationFrame loop which processes callbacks only while the browser window is scrolling. Any deviation in page window.pageYOffset will trigger the callbacks to fire. When the window stops scrolling the callbacks stop firing. Multiple callbacks can be added to this scroll listener behavior.

Required support

License

AGPL-3.0 or later

The LMS (Life Management System) is a free tool for personal knowledge management and goal management based on Obsidian.md.

README Documentation | 中文帮助 The LMS (Life Management System) is a tool for personal knowledge management and goal management based on Obsidian.md. It

Dec 21, 2022

Create a beautiful 3D tilted effect on scroll with jQuery Tilted Page Scroll plugin

#Tilted Page Scroll by Pete R. Create a beautilful 3D tilted scrolling effect for your website with jQuery Tilted Page Scroll. Created by Pete R., Fou

Sep 18, 2022

Scroll-stash - A JavaScript plugin to help preserve an element's scroll position.

scroll-stash A JavaScript plugin to help preserve an element's scroll position. CodePen Example Installation npm install scroll-stash JavaScript Impo

Sep 5, 2022

io-ts Typed Event Bus for the runtime of your Node.js application. A core for any event-driven architecture based app.

Typed Event Bus Based on io-ts types, this bus provides a handy interface to publish and consume events in the current runtime of the Node.js process.

May 23, 2022

'event-driven' library aims to simplify building backends in an event driven style

'event-driven' library aims to simplify building backends in an event driven style(event driven architecture). For message broker, light weight Redis Stream is used and for event store, the well known NoSQL database, MongoDB, is used.

Jan 4, 2023

Better DevX for Event Sourcing in TypeScript 🧑‍💻

Castore 🦫 Better DevX for Event Sourcing in TypeScript Castore provides a unified interface for implementing Event Sourcing in TypeScript 🦸‍♂️ . 🤔

Dec 22, 2022

An event management system.

What is the purpose? It's a very tiny library for publish/subscribe(pubsub) operations. There's no dependency. It's only 933(gziped: 437) byte. Writte

Mar 2, 2022

Business class content management for Node.js (plugins, server cluster management, data-driven pages)

PencilBlue A full featured Node.js CMS and blogging platform (plugins, server cluster management, data-driven pages) First and foremost: If at any poi

Dec 30, 2022

Business class content management for Node.js (plugins, server cluster management, data-driven pages)

PencilBlue A full featured Node.js CMS and blogging platform (plugins, server cluster management, data-driven pages) First and foremost: If at any poi

Dec 30, 2022

The Frontend of Escobar's Inventory Management System, Employee Management System, Ordering System, and Income & Expense System

Usage Create an App # with npx $ npx create-nextron-app my-app --example with-javascript # with yarn $ yarn create nextron-app my-app --example with-

Jan 2, 2023

▲ NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental)

nextjs-with-locomotive-scroll-example 🔺 NEXT.JS - Example project using Next.js with Locomotive Scroll. (experimental) 🚀 Demo 🚀 Getting started The

Dec 21, 2022

An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve and modify the bot state, respectively.

CQRS Wechaty An event-driven architecture wrapper for Wechaty that applies the CQS principle by using separate Query and Command messages to retrieve

Mar 23, 2022

AWS Serverless Event-driven Microservices with using AWS Lambda, AWS DynamoDB, AWS API Gateway, AWS EventBridge, AWS SQS, AWS CDK stands for Cloud Development Kit for IaC — Infrastructure as Code tool and AWS CloudWatch for monitoring.

Serverless Event-driven E-commerce Microservices UDEMY COURSE WITH DISCOUNTED - Step by Step Development of this Repository - https://www.udemy.com/c

Jan 3, 2023

An AWS Cloud Native application using CDK that defines a Serverless Event Driven application for interacting with Twitter and utilising Machine Learning / AI as a Service.

AWS Serverless Event Driven Twitter Bot An AWS Cloud Native application using CDK (Written in TypeScript) that defines a Serverless Event Driven appli

Dec 18, 2022

An infinite scroll plugin for Vue.js.

Intro An infinite scroll plugin for Vue.js, to help you implement an infinite scroll list more easily. Features Mobile friendly Internal spinners 2-di

Jan 4, 2023

A simple and fast API to monitor elements as you scroll

scrollMonitor The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch

Jan 4, 2023

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

#One Page Scroll 1.3.1 by Pete R. Create an Apple-like one page scroll website (iPhone 5S website) with One Page Scroll plugin Created by Pete R., Fou

Dec 31, 2022

A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Dec 26, 2022

Smooth WebGL Shader Transformations on Scroll

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll A handy setup to create a smooth scroll based GLSL animation using Three.js and GSA

Dec 25, 2022

Comments

Add support for "weak" callback bindings

Potentially add a second parameter to declare a callback as "weak". If the callback is invoked and triggers an error (or is missing?) the callback is removed from the list and the error suppressed.
enhancement

opened by jamestomasino 1