您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Configurable smooth scroll with optional motion blur. Uses requestAnimationFrame (like V-Sync).
So, you've got this JavaScript UserScript. What's the deal with it?
What is it? (The Elevator Pitch)
Basically, it's a browser script that hijacks the normal mouse wheel scrolling and replaces it with a super smooth, customizable, animated scroll. Think macOS trackpad scrolling or smooth scrolling in some native apps, but potentially everywhere you browse. It aims to make scrolling webpages feel less jerky and more fluid.
What does it actually do?
wheel
events on the page.<div>
box with overflow: scroll;
? It checks the element under your mouse and its parents to find the correct scrollable container.e.preventDefault()
).Y
scroll position.requestAnimationFrame
(which syncs with your screen's refresh rate, like V-Sync in games) to smoothly transition the scrollTop
of the target element from its current position to the target Y
.cfg.smth
) to make the scroll ease out naturally, not just stop abruptly. It also has a simple acceleration mechanic (cfg.accDelFct
, cfg.accMaxMult
) – if you scroll the wheel repeatedly and quickly, it scrolls further per tick, making fast scrolling feel more responsive.cfg.mBlur
is true
, it applies a CSS filter: blur(...)
effect to the scrolling element. The faster the scroll, the stronger the blur (up to a limit). Makes it look dynamic, but can impact performance slightly on lower-end machines.cfg.thrsh
), or if you interrupt it by clicking or touching the screen (_hdlClick
).cfg
object.How it Works (The Simple Tech Bits)
requestAnimationFrame
Loop (_animStep
): The heart of the smoothness. It runs every frame, calculating a small step towards the target scroll position based on the remaining distance and the DAMP_FCT
(derived from cfg.smth
). It then updates the element's scrollTop
.stMap
): Uses a WeakMap
to keep track of the animation state (target position, current animated position, animation ID, etc.) for each element being scrolled. WeakMap
is good because it doesn't prevent elements from being garbage-collected if they're removed from the page._hdlWheel
, _hdlClick
): Captures mouse wheel events globally (capture: true
) to intercept them early. Also listens for clicks/touches to cancel ongoing scrolls._getScrTop
, _setScrTop
, _isScr
, _getTgt
, etc.) to handle the details cleanly, like getting/setting scroll positions correctly for both the main window and specific elements, checking if an element is actually scrollable, and converting wheel delta modes to pixels.Is it Safe to Use?
@grant none
, meaning it doesn't require any special, potentially risky browser API access provided by UserScript managers like Tampermonkey. It just manipulates standard DOM properties (scrollTop
, style.filter
, style.scrollBehavior
).@include *
). This is convenient but means it might potentially conflict with websites that have their own very complex, custom scrolling JavaScript. Usually, it's fine, but keep an eye out. The script tries to avoid conflicts by temporarily setting scroll-behavior: auto
on the element it's animating.requestAnimationFrame
is very efficient for animations. The main potential performance hit is the optional motion blur, especially on complex pages or older hardware. If scrolling feels laggy, try setting cfg.mBlur = false;
. Without the blur, it should be quite lightweight.WeakMap
, const
/let
, IIFE scope). The document-start
run time means it loads early to catch scroll events reliably.In Short (TL;DR):
It's a well-written UserScript to give you configurable, physics-based smooth scrolling across websites. It uses efficient animation techniques (requestAnimationFrame
) and includes optional motion blur. It's generally safe to use as it doesn't need special permissions, but the motion blur might impact performance, and it could clash with the odd website that does super fancy scrolling things itself. If you like smooth scrolling, give it a whirl and tweak the cfg
to your liking!