滑动时暂停动画与视频（保留音频）

页面滑动时暂停动画和视频，松手后恢复，仅保留音频播放
当前为 2025-08-06 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         滑动时暂停动画与视频（保留音频）
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  页面滑动时暂停动画和视频，松手后恢复，仅保留音频播放
// @author       Your Name
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // 存储动画和视频状态
    const animationStates = new Map();
    const videoStates = new Map();
    let rafIds = [];
    let intervalIds = [];
    let timeoutIds = [];

    // 节流函数，优化滚动事件
    function throttle(fn, wait) {
        let lastCall = 0;
        return function (...args) {
            const now = performance.now();
            if (now - lastCall >= wait) {
                lastCall = now;
                fn.apply(this, args);
            }
        };
    }

    // 暂停CSS动画和过渡
    function pauseCSSAnimations() {
        const elements = document.querySelectorAll('[style*="animation"], [style*="transition"]');
        elements.forEach((element) => {
            const computedStyle = getComputedStyle(element);
            if (computedStyle.animationName !== 'none') {
                animationStates.set(element, element.style.animationPlayState || 'running');
                element.style.animationPlayState = 'paused';
            }
            if (computedStyle.transitionProperty !== 'none') {
                // 暂停过渡通过添加类或临时移除transition
                animationStates.set(element, element.style.transition || '');
                element.style.transition = 'none';
            }
        });
    }

    // 恢复CSS动画和过渡
    function resumeCSSAnimations() {
        animationStates.forEach((state, element) => {
            if (state.includes('animation')) {
                element.style.animationPlayState = state;
            } else if (state.includes('transition')) {
                element.style.transition = state;
            }
        });
        animationStates.clear();
    }

    // 暂停JavaScript动画
    function pauseJavaScriptAnimations() {
        // 代理requestAnimationFrame
        const originalRAF = window.requestAnimationFrame;
        window.requestAnimationFrame = function (callback) {
            rafIds.push(originalRAF(callback));
            return rafIds[rafIds.length - 1];
        };

        // 代理setInterval和setTimeout
        const originalSetInterval = window.setInterval;
        window.setInterval = function (callback, delay) {
            intervalIds.push(originalSetInterval(callback, delay));
            return intervalIds[intervalIds.length - 1];
        };
        const originalSetTimeout = window.setTimeout;
        window.setTimeout = function (callback, delay) {
            timeoutIds.push(originalSetTimeout(callback, delay));
            return timeoutIds[timeoutIds.length - 1];
        };

        // 取消现有动画
        rafIds.forEach((id) => window.cancelAnimationFrame(id));
        intervalIds.forEach((id) => window.clearInterval(id));
        timeoutIds.forEach((id) => window.clearTimeout(id));
        rafIds = [];
        intervalIds = [];
        timeoutIds = [];
    }

    // 恢复JavaScript动画（简化处理，需根据具体页面调整）
    function resumeJavaScriptAnimations() {
        // 恢复需要页面重新调用动画逻辑，实际情况需定制
        window.requestAnimationFrame = window.requestAnimationFrame.bind(window);
        window.setInterval = window.setInterval.bind(window);
        window.setTimeout = window.setTimeout.bind(window);
    }

    // 暂停视频（保留音频）
    function pauseVideos() {
        const videos = document.getElementsByTagName('video');
        for (let video of videos) {
            if (!video.paused) {
                videoStates.set(video, true);
                video.pause();
                video.muted = false; // 确保音频继续
            }
        }
    }

    // 恢复视频
    function resumeVideos() {
        videoStates.forEach((wasPlaying, video) => {
            if (wasPlaying && video.paused) {
                video.play().catch((err) => console.warn('Video resume failed:', err));
            }
        });
        videoStates.clear();
    }

    // 暂停Canvas动画
    function pauseCanvasAnimations() {
        const canvases = document.getElementsByTagName('canvas');
        for (let canvas of canvases) {
            const context = canvas.getContext('2d') || canvas.getContext('webgl') || canvas.getContext('webgl2');
            if (context && canvas.dataset.rafId) {
                window.cancelAnimationFrame(parseInt(canvas.dataset.rafId));
            }
        }
    }

    // 暂停SVG动画
    function pauseSVGAAnimations() {
        const svgElements = document.querySelectorAll('svg animate, svg animateTransform');
        svgElements.forEach((element) => {
            animationStates.set(element, element.getAttribute('begin') || '0s');
            element.setAttribute('begin', 'indefinite');
        });
    }

    // 恢复SVG动画
    function resumeSVGAAnimations() {
        animationStates.forEach((state, element) => {
            if (element.tagName.toLowerCase().startsWith('animate')) {
                element.setAttribute('begin', state);
            }
        });
    }

    // 暂停Web Animations API
    function pauseWebAnimations() {
        document.getAnimations().forEach((animation) => {
            animationStates.set(animation, animation.playState);
            animation.pause();
        });
    }

    // 恢复Web Animations API
    function resumeWebAnimations() {
        animationStates.forEach((state, animation) => {
            if (state === 'running') {
                animation.play();
            }
        });
    }

    // 暂停GIF（简单隐藏，需第三方库支持更精确控制）
    function pauseGIFs() {
        const images = document.querySelectorAll('img[src$=".gif"]');
        images.forEach((img) => {
            animationStates.set(img, img.style.display || 'block');
            img.style.display = 'none';
        });
    }

    // 恢复GIF
    function resumeGIFs() {
        animationStates.forEach((state, img) => {
            if (img.tagName.toLowerCase() === 'img') {
                img.style.display = state;
            }
        });
    }

    // 监控动态DOM变化
    function observeDOM() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.addedNodes.length) {
                    // 检测新添加的视频、canvas、svg等
                    pauseVideos();
                    pauseCanvasAnimations();
                    pauseSVGAAnimations();
                }
            });
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // 滑动事件处理
    let isScrolling = false;
    const scrollHandler = throttle(() => {
        if (!isScrolling) {
            isScrolling = true;
            pauseCSSAnimations();
            pauseJavaScriptAnimations();
            pauseVideos();
            pauseCanvasAnimations();
            pauseSVGAAnimations();
            pauseWebAnimations();
            pauseGIFs();
        }
    }, 100);

    // 滑动结束检测
    function handleScrollEnd() {
        if (isScrolling) {
            isScrolling = false;
            resumeCSSAnimations();
            resumeJavaScriptAnimations();
            resumeVideos();
            resumeCanvasAnimations();
            resumeSVGAAnimations();
            resumeWebAnimations();
            resumeGIFs();
        }
    }

    // 监听滚动和触摸事件
    document.addEventListener('scroll', scrollHandler);
    document.addEventListener('scrollend', handleScrollEnd);
    document.addEventListener('touchend', handleScrollEnd);
    document.addEventListener('mouseup', handleScrollEnd);

    // 初始化DOM监控
    observeDOM();

    // 清理事件监听器
    window.addEventListener('unload', () => {
        document.removeEventListener('scroll', scrollHandler);
        document.removeEventListener('scrollend', handleScrollEnd);
        document.removeEventListener('touchend', handleScrollEnd);
        document.removeEventListener('mouseup', handleScrollEnd);
    });
})();
欢迎访问Greasy Fork镜像
