Universal smooth scrolling with improved performance and compatibility. (Exceptions on large sites)
As of
// ==UserScript==
// @name Smooth Scroll
// @description Universal smooth scrolling with improved performance and compatibility. (Exceptions on large sites)
// @author DXRK1E
// @icon https://i.imgur.com/IAwk6NN.png
// @include *
// @exclude https://www.youtube.com/*
// @exclude https://mail.google.com/*
// @version 2.0
// @namespace sttb-dxrk1e
// @license MIT
// ==/UserScript==
(function() {
'use strict';
class SmoothScroll {
constructor() {
// Configurable settings
this.config = {
smoothness: 0.5, // Lower = smoother
acceleration: 0.5, // Higher = faster acceleration
minDelta: 0.1, // Minimum scroll delta to process
maxRefreshRate: 240, // Maximum FPS limit
minRefreshRate: 30, // Minimum FPS limit
defaultRefreshRate: 60, // Default FPS when can't detect
debug: false // Enable console logging
};
this.state = {
isLoaded: false,
lastFrameTime: 0,
activeScrollElements: new WeakMap()
};
this.handleWheel = this.handleWheel.bind(this);
this.handleClick = this.handleClick.bind(this);
this.animateScroll = this.animateScroll.bind(this);
}
// Initialize the smooth scroll functionality
init() {
if (window.top !== window.self || this.state.isLoaded) {
return;
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame =
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
((cb) => setTimeout(cb, 1000 / 60));
}
const wheelOptions = {
passive: false,
capture: true
};
document.addEventListener('wheel', this.handleWheel, wheelOptions);
document.addEventListener('mousedown', this.handleClick, true);
document.addEventListener('touchstart', this.handleClick, true);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
this.clearAllScrolls();
}
});
this.state.isLoaded = true;
this.log('Smooth Scroll Enhanced initialized');
}
log(...args) {
if (this.config.debug) {
console.log('[Smooth Scroll]', ...args);
}
}
getCurrentRefreshRate(timestamp) {
const frameTime = timestamp - (this.state.lastFrameTime || timestamp);
this.state.lastFrameTime = timestamp;
const fps = 1000 / Math.max(frameTime, 1);
return Math.min(
Math.max(fps, this.config.minRefreshRate),
this.config.maxRefreshRate
);
}
getScrollableParents(element, direction) {
const scrollables = [];
while (element && element !== document.body) {
if (this.isScrollable(element, direction)) {
scrollables.push(element);
}
element = element.parentElement;
}
if (this.isScrollable(document.body, direction)) {
scrollables.push(document.body);
}
return scrollables;
}
isScrollable(element, direction) {
if (!element || element === window || element === document) {
return false;
}
const style = window.getComputedStyle(element);
const overflowY = style['overflow-y'];
if (overflowY === 'hidden' || overflowY === 'visible') {
return false;
}
const scrollTop = element.scrollTop;
const scrollHeight = element.scrollHeight;
const clientHeight = element.clientHeight;
if (direction < 0) {
return scrollTop > 0;
} else {
return Math.ceil(scrollTop + clientHeight) < scrollHeight;
}
}
handleWheel(event) {
if (event.defaultPrevented || window.getSelection().toString()) {
return;
}
const scrollables = this.getScrollableParents(event.target, Math.sign(event.deltaY));
if (!scrollables.length) {
return;
}
const target = scrollables[0];
let delta = event.deltaY;
if (event.deltaMode === 1) { // LINE mode
const lineHeight = parseInt(getComputedStyle(target).lineHeight) || 20;
delta *= lineHeight;
} else if (event.deltaMode === 2) { // PAGE mode
delta *= target.clientHeight;
}
// Apply scroll
this.scroll(target, delta);
event.preventDefault();
}
handleClick(event) {
const elements = this.getScrollableParents(event.target, 0);
elements.forEach(element => this.stopScroll(element));
}
scroll(element, delta) {
if (!this.state.activeScrollElements.has(element)) {
this.state.activeScrollElements.set(element, {
pixels: 0,
subpixels: 0
});
}
const scrollData = this.state.activeScrollElements.get(element);
const currentSpeed = Math.abs(scrollData.pixels);
const acceleration = Math.sqrt(currentSpeed / Math.abs(delta) * this.config.acceleration);
const totalDelta = delta * (1 + acceleration);
scrollData.pixels += totalDelta;
if (!scrollData.animating) {
scrollData.animating = true;
this.animateScroll(element);
}
}
stopScroll(element) {
if (this.state.activeScrollElements.has(element)) {
const scrollData = this.state.activeScrollElements.get(element);
scrollData.pixels = 0;
scrollData.subpixels = 0;
scrollData.animating = false;
}
}
clearAllScrolls() {
this.state.activeScrollElements = new WeakMap();
}
animateScroll(element) {
if (!this.state.activeScrollElements.has(element)) {
return;
}
const scrollData = this.state.activeScrollElements.get(element);
if (Math.abs(scrollData.pixels) < this.config.minDelta) {
scrollData.animating = false;
return;
}
requestAnimationFrame((timestamp) => {
const refreshRate = this.getCurrentRefreshRate(timestamp);
const smoothness = Math.pow(refreshRate, -1 / (refreshRate * this.config.smoothness));
const scrollAmount = scrollData.pixels * (1 - smoothness);
const integerPart = Math.trunc(scrollAmount);
const fractionalPart = scrollAmount - integerPart;
scrollData.subpixels += fractionalPart;
let additionalPixels = Math.trunc(scrollData.subpixels);
scrollData.subpixels -= additionalPixels;
const totalScroll = integerPart + additionalPixels;
scrollData.pixels -= totalScroll;
// Apply scroll
try {
element.scrollTop += totalScroll;
} catch (error) {
this.log('Scroll error:', error);
this.stopScroll(element);
return;
}
// Continue animation
if (scrollData.animating) {
this.animateScroll(element);
}
});
}
}
// Initialize
const smoothScroll = new SmoothScroll();
smoothScroll.init();
})();