Smooth Scroll

Universal smooth scrolling with improved performance and compatibility. (Exceptions on large sites)
目前為 2024-11-22 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==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.1
// @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
                touchpadMultiplier: 1.5, // Multiplier for touchpad sensitivity
                momentumMultiplier: 0.8, // Multiplier for touchpad momentum
                debug: false,           // Enable console logging
                isTouchpad: false       // Dynamically detected
            };
 
            this.state = {
                isLoaded: false,
                lastFrameTime: 0,
                lastDeltaTime: 0,
                lastDelta: 0,
                consecutiveScrolls: 0,
                activeScrollElements: new WeakMap()
            };
 
            this.handleWheel = this.handleWheel.bind(this);
            this.handleClick = this.handleClick.bind(this);
            this.animateScroll = this.animateScroll.bind(this);
            this.detectScrollDevice = this.detectScrollDevice.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);
 
            // Add touchpad gesture events
            document.addEventListener('gesturestart', this.handleGesture, true);
            document.addEventListener('gesturechange', this.handleGesture, true);
            document.addEventListener('gestureend', this.handleGesture, true);
 
            document.addEventListener('visibilitychange', () => {
                if (document.hidden) {
                    this.clearAllScrolls();
                }
            });
 
            this.state.isLoaded = true;
            this.log('Smooth Scroll Activated');
        }
 
        detectScrollDevice(event) {
            const now = Date.now();
            const timeDelta = now - this.state.lastDeltaTime;
            const deltaDiff = Math.abs(event.deltaY - this.state.lastDelta);
 
            // Touchpad detection heuristics
            if (timeDelta < 50 && deltaDiff < 10) {
                this.state.consecutiveScrolls++;
            } else {
                this.state.consecutiveScrolls = 0;
            }
 
            this.config.isTouchpad = this.state.consecutiveScrolls > 3 ||
                                   (Math.abs(event.deltaY) < 10 && event.deltaMode === 0);
 
            this.state.lastDeltaTime = now;
            this.state.lastDelta = event.deltaY;
        }
 
        handleGesture(event) {
            // Prevent default gesture behavior
            event.preventDefault();
 
            // Mark as touchpad input
            this.config.isTouchpad = true;
        }
 
 
        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;
            }
 
            // Detect if using touchpad
            this.detectScrollDevice(event);
 
            const scrollables = this.getScrollableParents(event.target, Math.sign(event.deltaY));
            if (!scrollables.length) {
                return;
            }
 
            const target = scrollables[0];
            let delta = event.deltaY;
 
            // Apply touchpad-specific adjustments
            if (this.config.isTouchpad) {
                delta *= this.config.touchpadMultiplier;
 
                // Add momentum for smoother touchpad scrolling
                if (Math.abs(delta) < 50) {
                    delta *= this.config.momentumMultiplier *
                            (1 + (this.state.consecutiveScrolls * 0.1));
                }
            }
 
            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;
            }
 
            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);
 
                // Adjust smoothness based on input device
                let smoothness = this.config.smoothness;
                if (this.config.isTouchpad) {
                    smoothness *= 1.2; // Slightly smoother for touchpad
                }
 
                const smoothnessFactor = Math.pow(refreshRate, -1 / (refreshRate * smoothness));
 
                const scrollAmount = scrollData.pixels * (1 - smoothnessFactor);
                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;
 
                try {
                    element.scrollTop += totalScroll;
                } catch (error) {
                    this.log('Scroll error:', error);
                    this.stopScroll(element);
                    return;
                }
 
                if (scrollData.animating) {
                    this.animateScroll(element);
                }
            });
        }
    }
 
    // Initialize
    const smoothScroll = new SmoothScroll();
    smoothScroll.init();
})();