All Projects → d4nyll → Lethargy

d4nyll / Lethargy

Licence: mit
Distinguish between scroll events initiated by the user, and those by inertial scrolling

Programming Languages

coffeescript
4710 projects

Labels

Projects that are alternatives of or similar to Lethargy

Vue Happy Scroll
基于vue2.0实现的滚动条插件。scroll component for vue2.0
Stars: ✭ 299 (-26.54%)
Mutual labels:  scroll
Jquery.scrollto
Lightweight, cross-browser and highly customizable animated scrolling with jQuery
Stars: ✭ 3,609 (+786.73%)
Mutual labels:  scroll
React Scrollspy
🔯 react scrollspy component
Stars: ✭ 382 (-6.14%)
Mutual labels:  scroll
Asscroll
Ash's Smooth Scroll 🍑
Stars: ✭ 324 (-20.39%)
Mutual labels:  scroll
Dragsloplayout
A UI library for Android
Stars: ✭ 354 (-13.02%)
Mutual labels:  scroll
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (-11.06%)
Mutual labels:  scroll
Uumarqueeview
[iOS]Customizable marquee view. #Marquee,MarqueeView,跑马灯,滚屏,上翻,左滑,多行,自定义
Stars: ✭ 295 (-27.52%)
Mutual labels:  scroll
React Scrolllock
🔒 Prevent scroll on the <body />
Stars: ✭ 393 (-3.44%)
Mutual labels:  scroll
Ngx Scrollbar
Custom overlay-scrollbars with native scrolling mechanism
Stars: ✭ 355 (-12.78%)
Mutual labels:  scroll
Scrollreveal
Animate elements as they scroll into view.
Stars: ✭ 20,264 (+4878.87%)
Mutual labels:  scroll
Vue Scrollama
Vue component to easily setup scroll-driven interactions (aka scrollytelling)
Stars: ✭ 326 (-19.9%)
Mutual labels:  scroll
Uos
🐭 A tiny 250b scroll listener with progress.
Stars: ✭ 349 (-14.25%)
Mutual labels:  scroll
Hc Sticky
JavaScript library that makes any element on your page visible while you scroll.
Stars: ✭ 375 (-7.86%)
Mutual labels:  scroll
Scrollmonitor
A simple and fast API to monitor elements as you scroll
Stars: ✭ 3,250 (+698.53%)
Mutual labels:  scroll
Slidablelayout
SlidableLayout is devoted to build a stable, easy-to-use and smooth sliding layout.
Stars: ✭ 385 (-5.41%)
Mutual labels:  scroll
React Native Pagination
Animated Pagination For React Native's ListView, FlatList, and SectionList
Stars: ✭ 296 (-27.27%)
Mutual labels:  scroll
Xlcardswitch
iOS 利用余弦函数特性实现可以居中放大的图片浏览工具
Stars: ✭ 361 (-11.3%)
Mutual labels:  scroll
Notebook
my notebook 📒
Stars: ✭ 405 (-0.49%)
Mutual labels:  scroll
React Native Parallax Scroll
Parallax scroll view for react-native
Stars: ✭ 385 (-5.41%)
Mutual labels:  scroll
Jxpagelistview
高仿闲鱼、转转、京东、中央天气预报等主流APP列表底部分页滚动视图
Stars: ✭ 377 (-7.37%)
Mutual labels:  scroll

Lethargy

CDNJS FOSSA Status

Lethargy is a tiny (612b minified + gzipped) JavaScript library to help distinguish between scroll events initiated by the user, and those by inertial scrolling. Lethargy does not have external dependencies.

Lethargy is used in smartscroll, a jQuery scroll plugin, to resolve problems with inertial scrolling.

Demo

Install

Download lethargy.js or lethargy.min.js

Bower

bower install lethargy

npm

npm install lethargy

Use

Include lethargy.min.js in your document.

<script src="./lethargy.js"></script>

Create an instance of Lethargy. You may pass in options (see below), but usually the default is good enough.

var lethargy = new Lethargy(); // Use defaults
var lethargy = new Lethargy(7, 100, 0.05); // Tinkering with the options

If you found optimizations for the defaults, please share it in this ticket!

Bind the mousewheel or scroll events and pass the event to Lethargy.

$(window).bind('mousewheel DOMMouseScroll wheel MozMousePixelScroll', function(e){
    e.preventDefault()
    e.stopPropagation();
    if(lethargy.check(e) !== false) {
        // Do something with the scroll event
    }
});

lethargy.check(e) will return 1 if it is a normal scroll up event, -1 if it is a normal scroll down event, and false if it is initiated by inertial scrolling.

Lethargy focus on preventing false positives (saying it's a normal scroll event when it wasn't), but tolerates false negatives (saying it's not a normal scroll event when it is).

Webpack

If you are using Webpack, you can use the exports-loader to require the Lethargy constructor.

$ yarn add exports-loader

Then, to import Lethargy:

const Lethargy = require("exports-loader?this.Lethargy!lethargy/lethargy");

Options

All options are optional.

MacBook Air Trackpad wheelDelta curve

stability - Specifies the length of the rolling average. In effect, the larger the value, the smoother the curve will be. This attempts to prevent anomalies from firing 'real' events. Valid values are all positive integers, but in most cases, you would need to stay between 5 and around 30.

sensitivity - Specifies the minimum value for wheelDelta for it to register as a valid scroll event. Because the tail of the curve have low wheelDelta values, this will stop them from registering as valid scroll events. The unofficial standard wheelDelta is 120, so valid values are positive integers below 120.

tolerance - Prevent small fluctuations from affecting results. Valid values are decimals from 0, but should ideally be between 0.05 and 0.3.

What problem does it solve?

Scroll plugins such as smartscroll, jquery-mousewheel or fullPage.js work by detecting scroll events and then doing something with them, such as scroll to the next frame. However, inertial scrolling continues to emit scroll events even after the user stopped, and this can often lead to problems, such as scrolling two to three frames when the user only scrolled once.

Below charts the wheelDelta values of each scroll action using this Gist and demo by Matthew Simpson.

Desktop Mouse

Desktop Mouse wheelDelta graph

MacBook Air Trackpad

MacBook Air Trackpad wheelDelta curve

As you can see, the Desktop Mouse emits small

How does it work?

Lethargy keeps a record of the last few wheelDelta values that is passed through it, it will then work out whether these values are decreasing (decaying), and if so, concludes that the scroll event originated from inertial scrolling, and not directly from the user.

Limitations

Not all trackpads work the same, some trackpads do not have a decaying wheelDelta value, and so our method of decay detection would not work. Instead, to cater for this situation, we had to, grudgingly, set a very small time delay between when events will register. We have tested this and for normal use does not affect user experience more than usual.

ASUS Trackpad

ASUS Trackpad

License

FOSSA Status

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].