零基础开发Tampermonkey漫画自动滚动脚本需求

功能说明 #

• 页面右下角悬浮控制按钮，点击可切换自动滚动的启停状态
• 按住按钮上下拖动调节滚动速度：向上拖动减慢速度，向下拖动加快速度
• 适配漫画阅读场景，实现从上到下匀速自动滚动

完整脚本代码 #

// ==UserScript==
// @name         漫画自动滚动助手
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动滚动漫画页面，支持启停控制和速度调节
// @match        https://*/*  // 替换为你常用的漫画网站URL，比如https://*.manhuagui.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 添加按钮样式
    const style = document.createElement('style');
    style.textContent = `
        #comic-scroll-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            z-index: 99999;
            user-select: none;
        }
        #comic-scroll-btn:hover {
            background-color: #555;
        }
        #comic-scroll-btn.active {
            background-color: #e74c3c;
        }
    `;
    document.head.appendChild(style);

    // 创建控制按钮
    const scrollBtn = document.createElement('button');
    scrollBtn.id = 'comic-scroll-btn';
    scrollBtn.textContent = '▶';
    document.body.appendChild(scrollBtn);

    // 滚动控制变量
    let scrollInterval = null;
    let scrollSpeed = 80; // 初始间隔（ms），值越小速度越快
    const minSpeed = 20; // 最快速度对应的最小间隔
    const maxSpeed = 200; // 最慢速度对应的最大间隔
    let isDragging = false;
    let startY = 0;
    let startSpeed = scrollSpeed;

    // 自动滚动函数
    function autoScroll() {
        window.scrollBy(0, 1); // 每次向下滚动1像素
    }

    // 点击按钮切换启停状态
    scrollBtn.addEventListener('click', () => {
        if (scrollInterval) {
            // 停止滚动
            clearInterval(scrollInterval);
            scrollInterval = null;
            scrollBtn.textContent = '▶';
            scrollBtn.classList.remove('active');
        } else {
            // 开始滚动
            scrollInterval = setInterval(autoScroll, scrollSpeed);
            scrollBtn.textContent = '⏸';
            scrollBtn.classList.add('active');
        }
    });

    // 拖动按钮调节速度
    scrollBtn.addEventListener('mousedown', (e) => {
        isDragging = true;
        startY = e.clientY;
        startSpeed = scrollSpeed;
        e.preventDefault();
    });

    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        const deltaY = e.clientY - startY;
        // 计算新速度：向下拖动加快，向上拖动减慢
        let newSpeed = startSpeed - deltaY * 0.5;
        // 限制速度在合理范围
        newSpeed = Math.max(minSpeed, Math.min(maxSpeed, newSpeed));
        scrollSpeed = newSpeed;
        // 如果正在滚动，实时更新滚动速度
        if (scrollInterval) {
            clearInterval(scrollInterval);
            scrollInterval = setInterval(autoScroll, scrollSpeed);
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
})();

使用步骤 #

1. 安装Tampermonkey：在浏览器应用商店搜索并安装Tampermonkey扩展
2. 导入脚本：点击Tampermonkey图标 → 选择「创建新脚本」→ 删除默认代码，粘贴上面的脚本
3. 配置适用网站：修改脚本开头的@match规则，替换成你常用的漫画网站URL（比如https://*.manhuagui.com/*）
4. 使用操作：
   • 打开漫画页面，右下角会出现深色圆形按钮
   • 点击按钮：切换自动滚动的播放/暂停状态
   • 按住按钮上下拖动：向上拖动减慢滚动速度，向下拖动加快速度

代码简单说明 #

• 样式部分：设置按钮的悬浮位置、外观，确保按钮始终在页面最上层不被遮挡
• 按钮创建：动态生成控制按钮并添加到页面中
• 滚动逻辑：用定时器定时执行滚动操作，间隔时间决定滚动速度
• 启停控制：点击按钮时开启或关闭定时器，同时切换按钮图标和颜色
• 速度调节：监听鼠标拖动事件，根据拖动距离调整滚动间隔，实时更新速度

内容的提问来源于stack exchange，提问作者LGJA