缓慢下滑网页(可调参数 + 精确开关)

支持调节每步像素和间隔时间,绿色=运行,红色=停止,状态精准同步

目前為 2025-08-07 提交的版本,檢視 最新版本

// ==UserScript==
// @name         缓慢下滑网页(可调参数 + 精确开关)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  支持调节每步像素和间隔时间,绿色=运行,红色=停止,状态精准同步
// @author       qckg
// @match        *://*/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function () {
    'use strict';

    // 默认配置(可被用户修改)
    let scrollStep = 5;           // 每步滚动像素
    let scrollInterval = 50;      // 每次滚动间隔(毫秒)

    // 全局状态
    let isScrolling = false;
    let isInitialized = false;

    // 公共样式
    const baseStyle = `
        font-family: Arial, sans-serif;
        font-size: 13px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    `;

    // 创建参数调节区域和开关按钮
    function createControls() {
        if (document.getElementById('tm-scroll-controls') || isInitialized) return;
        isInitialized = true;

        // 容器
        const container = document.createElement('div');
        container.id = 'tm-scroll-controls';
        container.style.cssText = `
            position: fixed;
            bottom: 80px;
            right: 20px;
            z-index: 99999;
            width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 12px;
            font-family: Arial, sans-serif;
            user-select: none;
        `;

        // 标题
        const title = document.createElement('div');
        title.textContent = '自动下滑设置';
        title.style.cssText = 'font-weight: bold; margin-bottom: 8px; color: #333; font-size: 14px;';
        container.appendChild(title);

        // 滚动步长控制
        container.appendChild(createLabeledSlider('步长(px)', 'step', 1, 20, 1, scrollStep, (val) => { scrollStep = parseInt(val); }));
        // 滚动间隔控制
        container.appendChild(createLabeledSlider('间隔(ms)', 'interval', 10, 200, 10, scrollInterval, (val) => { scrollInterval = parseInt(val); }));

        document.body.appendChild(container);

        // 创建主开关按钮(在调节区下方)
        createToggleButton();
    }

    // 创建带标签和 +/- 控件的调节项
    function createLabeledSlider(label, idSuffix, min, max, step, value, onChange) {
        const div = document.createElement('div');
        div.style.margin = '8px 0';

        div.innerHTML = `
            <span style="display:inline-block;width:50px;font-size:12px;color:#555;">${label}</span>
            <button data-action="decr" style="${baseStyle} background:#f8f8f8; width:24px; height:24px; margin-left:4px;">−</button>
            <input type="number" id="scroll-${idSuffix}" value="${value}" min="${min}" max="${max}" step="${step}"
                   style="width:50px; height:24px; text-align:center; border:1px solid #ddd; border-radius:4px; margin:0 4px; padding:0; font-size:12px;">
            <button data-action="incr" style="${baseStyle} background:#f8f8f8; width:24px; height:24px;">+</button>
        `;

        const input = div.querySelector('input');
        const decrBtn = div.querySelector('[data-action="decr"]');
        const incrBtn = div.querySelector('[data-action="incr"]');

        // 输入框变化
        input.addEventListener('change', () => {
            let val = parseInt(input.value) || parseInt(input.defaultValue);
            val = Math.max(min, Math.min(max, val));
            input.value = val;
            onChange(val);
        });

        // 减小
        decrBtn.addEventListener('click', () => {
            let val = Math.max(min, parseInt(input.value) - step);
            input.value = val;
            onChange(val);
        });

        // 增大
        incrBtn.addEventListener('click', () => {
            let val = Math.min(max, parseInt(input.value) + step);
            input.value = val;
            onChange(val);
        });

        return div;
    }

    // 创建主开关按钮
    function createToggleButton() {
        const button = document.createElement('button');
        button.id = 'tm-scroll-toggle-btn';
        button.textContent = '自动下滑:关';
        button.style.cssText = `
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99999;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 3px 8px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        `;
        updateButtonStyle(false);

        button.onclick = toggleScroll;

        button.onmouseenter = () => {
            if (!isScrolling) button.style.transform = 'scale(1.05)';
        };
        button.onmouseleave = () => {
            button.style.transform = 'scale(1)';
        };

        document.body.appendChild(button);
    }

    // 更新按钮文字和颜色
    function updateButtonUI() {
        const button = document.getElementById('tm-scroll-toggle-btn');
        if (!button) return;
        button.textContent = isScrolling ? '自动下滑:开' : '自动下滑:关';
        updateButtonStyle(isScrolling);
    }

    function updateButtonStyle(running) {
        const button = document.getElementById('tm-scroll-toggle-btn');
        if (!button) return;
        button.style.backgroundColor = running ? '#4CAF50' : '#f44336';
    }

    // 切换滚动状态
    function toggleScroll() {
        isScrolling = !isScrolling;
        updateButtonUI();
        if (isScrolling) smoothScroll();
    }

    // 平滑滚动
    function smoothScroll() {
        if (!isScrolling) return;

        const currentScroll = window.pageYOffset;
        const windowHeight = window.innerHeight;
        const documentHeight = document.documentElement.scrollHeight;
        const maxScroll = documentHeight - windowHeight;

        if (currentScroll >= maxScroll) {
            isScrolling = false;
            updateButtonUI();
            return;
        }

        window.scrollBy(0, scrollStep);
        setTimeout(smoothScroll, scrollInterval);
    }

    // 初始化:等待 DOM 加载
    function init() {
        if (document.body) {
            createControls();
        } else {
            document.addEventListener('DOMContentLoaded', createControls);
        }
    }

    // 快捷键 S:切换开关
    document.addEventListener('keydown', (e) => {
        if (e.key.toLowerCase() === 's') {
            const btn = document.getElementById('tm-scroll-toggle-btn');
            if (btn) btn.click();
        }
    });

    // 启动
    init();

})();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址