Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

Related tags

Learning resource scrooth
Overview

scrooth

Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.

Why?

I needed that, and I was unable to find proper one. All of them were using heavier plugins like jQuery, Tween, etc. So i wrote my own, decided to share it.

Usage

Just include scrooth.js in your file, and later initialize it with:

const scroll = new Scrooth();

Params

There is some stuff that you can change:

const scroll = new Scrooth({
  element: window,
  strength: 10,
  acceleration: 1.5,
  deceleration: 0.975,
});

Those are defaults. I wont be describing each one, because you already know what they're doing, just by reading the names. Hope it'll do work!

You might also like...

Trims unnecessary whitespace from your Obsidian documents.

Trim Whitespace Trim Whitespace trims unnecessary blank characters from your Obsidian documents. This is a common feature in code editing software, an

Dec 13, 2022

Remove unnecessary files from node_modules (.md, .ts, ...)

Remove unnecessary files from node_modules (.md, .ts, ...)

What? node-prune is a small tool to prune unnecessary files from ./node_modules, such as markdown, typescript source files, and so on. Primarily built

Jan 1, 2023

We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

We are creating a Library that would ensure developers do not reinvent the wheel anymore as far as Authentication is concerned. Developers can easily register and download authentication codes that suits their need at any point.

#AuthWiki Resource Product Documentation Figma Database Schema First Presentation Live Link API Documentation Individual Contributions User Activity U

Dec 2, 2022

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

Dec 10, 2022

Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose.

Atlan CLI Atlan is a CLI that helps you to manage local dockerized infrastructure without any needed knowledge on Docker and Docker Compose. What is A

Aug 17, 2022

jquery plugin to convert number inputs into knobs that can be adjusted by dragging with mouse or fingers

jquery-knobby is a jquery plugin to convert number input elements into turnable knobs that can be adjusted by cyclic dragging with mouse or fingers -

Oct 2, 2020

An infinite scrolling plugin for jQuery.

jScroll - jQuery Plugin for Infinite Scrolling / Auto-Paging Official site at jscroll.com. Copyright © Philip Klauzinski Dual licensed under the MIT a

Dec 29, 2022

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light 7ko min.js and 1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Jan 18, 2022

jQuery plugin for horizontally scrolling galleries

jQuery Horiztonal Scroll Gallery This jQuery plugin slides through a horiztonal gallery of items as you scroll down. It makes use of position:sticky s

Feb 23, 2022
Comments
  • Bug when scrolling to the end of page and back up

    Bug when scrolling to the end of page and back up

    Hey there,

    thank you for sharing your script. it really is the only one i found after hours of research that provides native scrolling and is easily adjustable to horizontal scroll.

    So now that's that out of the way there is a bug i want to report:

    When scrolling to one end of the scroll spectrum (like knocking on the bottom of the page) and immediately scroll back up there is a delay in which the scroll does not respond to the moving of the mousewheel.

    Not sure how to implement this so i can't really make a PR here.

    Any help is very much appreciated!

    opened by sebastianjung 0
Owner
Rafał Spiżewski
Self-taught webdev wannabe
Rafał Spiżewski
GitHub https://shererere.github.io/scrooth/
Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

TEG Marquee Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mou

Paul B. Joiner 0 Dec 30, 2021
Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.

pure-knob Initially a (circular) knob / dial control with mouse, wheel, touch and keyboard support, implemented in pure JavaScript. In addition, this

Andre Plötze 44 Nov 4, 2022
A simple smooth scrolling using 100% vanilla JavaScript.

SmoothScroll.js A simple smooth scrolling using 100% vanilla JavaScript, and it's only 3kb! > Demo Usage // index.html <html> <head> <link rel="

Ray Chang 5 Aug 24, 2022
Pure JavaScript HTML5 Canvas Range Slider. No stylesheet needed. Simple, elegant and powerful. A quirky alternative to other sliders.

CanvasSlider CanvasSlider is a lightweight JavaScript range slider. Most of the range slider controls use Javascript and a stylesheet. This slider use

null 7 Aug 15, 2022
A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.

Cuberto Mouse Follower A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website. Dependencies GSAP v3 (

Cuberto 410 Dec 30, 2022
A social network app cloned from Instagram built with Next.Js, Socket.IO and a lots of other new stuff.

Instagram Noob ⚡ A social network app cloned from Instagram built with Next.Js, Socket.IO and a lots of other new stuff. Live Demo: https://instagram-

Hung Minh 20 Oct 19, 2022
mock APIs, intelligently, with context, and perform other stuff as well

@sasta-sa/project mock APIs, intelligently, with context, and perform other stuff as well ?? Setting up Clone the project git clone https://github.com

null 5 Jan 27, 2022
Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.

Solid Windowed Given a list of items, only render what's visible on the screen while allowing scrolling the whole list. A Solid component. See https:/

Tito 40 Dec 21, 2022
Reddit is a website where a community of registered users ( redditors) submits content. Its format resembles a traditional bulletin board system, allowing users to post messages and links to other websites and comment on each other's posts. Entries are ranked by a voting system; other users can vote comments and posts either up ( upvoted) or down.

Setup First, run the development server: npm run dev Open http://localhost:3000 with your browser to see the result. You can start editing the page by

Ibrahim Raimi 4 Jun 23, 2022
Trim unnecessary indentation when pasting code

Unindent When pasting code from your editor into Discord, it often ends up having a lot of indentation. This plugin fixes that by trimming unnecessary

Vens Powercord Plugins 19 May 1, 2022