本文详细指导如何开发一个tampermonkey脚本，以实现网页的自动滚动功能。教程涵盖了用户界面按钮的集成、可调节滚动速度的实现，以及如何将现有javascript解决方案适配到全局文档滚动。通过学习本文，读者将能够创建个性化的自动滚动工具，显著提升阅读长篇内容（如漫画）的体验。
理解Tampermonkey与用户脚本
Tampermonkey是一款广受欢迎的浏览器扩展，它允许用户在特定网页加载时运行自定义的JavaScript代码，这些代码被称为“用户脚本”（User Scripts）。用户脚本能够修改页面内容、行为或添加全新功能，为用户提供了极大的灵活性，以满足个性化的浏览需求。通过Tampermonkey，我们可以轻松地在任何网页上注入自定义逻辑，实现各种自动化或增强功能。
需求分析：构建网页自动滚动功能
我们的目标是开发一个Tampermonkey脚本，实现以下核心功能：
- 全局自动滚动： 使整个网页内容从上到下自动平滑滚动。
- 交互式控制： 提供一个浮动按钮，用于启动和暂停自动滚动。
- 速度调节： 允许用户通过一个滑块实时调整滚动的速度。
我们将基于一个现有的JavaScript示例进行改造，其关键在于将滚动操作的目标从特定的DOM元素（如 div）切换到整个 document 对象，从而实现全页滚动。
构建用户界面（UI）
为了实现启动/暂停和速度调节功能，我们需要在页面上动态添加一个浮动的UI控制面板。
HTML结构
我们将创建一个包含一个播放按钮、一个暂停按钮和一个速度调节滑块的容器。为了方便，这里直接将基础样式内联，使其能够浮动在页面的右下角。
<div id="auto-scroll-controls" style="position: fixed; right: 20px; bottom: 20px; z-index: 9999; background: rgba(0,0,0,0.7); padding: 10px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; gap: 10px;">
<button id="play" class="scroll-btn active" style="background: #4CAF50; color: white; border: none; padding: 10px 15px; border-radius: 3px; cursor: pointer;">播放</button>
<button id="pause" class="scroll-btn" style="background: #f44336; color: white; border: none; padding: 10px 15px; border-radius: 3px; cursor: pointer; display: none;">暂停</button>
<input type="range" min="1" max="10" value="5" class="slider" id="scroll-slider" style="width: 100px;">
</div>CSS样式
上述HTML已经包含了基本的内联样式以实现浮动和基本布局。若需更精美的外观，可以参考原始Codepen示例中的CSS，并通过Tampermonkey的 GM_addStyle 函数注入。例如，确保按钮在激活时显示，非激活时隐藏：
GM_addStyle(`
#auto-scroll-controls .scroll-btn.active { display: block; }
#auto-scroll-controls .scroll-btn:not(.active) { display: none; }
/* 其他美化样式可在此处添加 */
`);注意： GM_addStyle 是Tampermonkey提供的一个API，用于向当前页面注入CSS样式。
核心JavaScript逻辑
我们将基于提供的Codepen示例代码进行改造，使其作用于整个文档。
初始化变量
首先，定义两个全局变量来管理滚动状态：
let x = 0; // 当前滚动位置，每次滚动时递增 let startScroll; // 用于存储setInterval的ID，以便后续清除定时器
滚动函数 scroller
这是实现自动滚动的核心函数。原始示例是针对特定 .scrollable 元素，我们需要将其修改为针对整个 document 对象。
function scroller () {
x += 1; // 每次调用增加1像素
$(document).scrollTop(x); // 关键修改：将滚动目标设为整个文档
// 检查是否已滚动到底部，如果达到，则停止滚动并重置按钮状态
if (x >= $(document).height() - $(window).height()) {
clearInterval(startScroll);
$('#play').addClass('active');
$('#pause').removeClass('active');
}
}解释： $(document).scrollTop(x) 会将整个文档的垂直滚动条位置设置为 x。我们还添加了一个简单的逻辑来检测是否滚动到底部，并在到达时自动停止滚动。
启动/暂停功能
通过点击UI中的播放或暂停按钮来控制 setInterval 定时器的启动和停止。
$('#auto-scroll-controls').on('click', '.scroll-btn', function () {
const isPlayButton = $(this).attr('id') === 'play';
// 切换播放/暂停按钮的显示状态
$('#play').toggleClass('active', !isPlayButton 
