给网页添加自动向上、向下滚动的按钮，对于看文章，看小说，看漫画等场景下使用极为舒适
// ==UserScript==
// @name 自动滚动
// @author Kaiter-Plus
// @description 给网页添加自动向上、向下滚动的按钮，对于看文章，看小说，看漫画等场景下使用极为舒适
// @namespace https://gitee.com/Kaiter-Plus/TampermonkeyScript/tree/master/AutoScroll
// @include *://*
// @grant none
// @version 1.01
// @license BSD-3-Clause
// @noframes
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @grant GM_addElement
// ==/UserScript==
;(function () {
'use strict'
// 默认速度
let defaultSpeed = 5
// 定时器id
let currentFrameId = 0
// 记录上一次执行的时间
let prevTIme = 0
// 按下的位置
const pressPosition = { top: 0, left: 0 }
// 初始化速度
const speed = GM_getValue('speed')
speed ? (defaultSpeed = +speed) : GM_setValue('speed', defaultSpeed)
// 创建一个滚动容器
const scrollContainer = GM_addElement(document.body, 'div', {
id: 'scroll-container',
class: 'scroll-container'
})
scrollContainer.addEventListener('mousedown', press)
// 创建自动向上的按钮
const scrollUp = GM_addElement(scrollContainer, 'div', {
id: 'scroll-up',
class: 'scroll-up'
})
scrollUp.addEventListener('mouseover', () => {
autoScroll(-1)
})
scrollUp.addEventListener('mouseout', stopScroll)
// 创建速度显示
const scrollSpeed = GM_addElement(scrollContainer, 'div', {
id: 'scroll-speed',
class: 'scroll-speed',
textContent: speed
})
scrollSpeed.addEventListener('wheel', settingSpeed)
// 创建自动向下的按钮
const scrollDown = GM_addElement(scrollContainer, 'div', {
id: 'scroll-down',
class: 'scroll-down'
})
scrollDown.addEventListener('mouseover', () => {
autoScroll(1)
})
scrollDown.addEventListener('mouseout', stopScroll)
// 自动滚动
function autoScroll(direction) {
scroll(direction)
}
// 滚动
function scroll(direction) {
currentFrameId = window.requestAnimationFrame(time => {
if (!prevTIme) prevTIme = time
const elapsed = (time - prevTIme) / 1000
// 每 50ms 执行一次
window.scrollBy(0, defaultSpeed * 10 * direction * elapsed)
prevTIme = time
scroll(direction)
})
}
// 停止滚动
function stopScroll() {
prevTIme = 0
window.cancelAnimationFrame(currentFrameId)
}
// 设置滚动速度
function settingSpeed(e) {
e.preventDefault()
if (e.deltaY < 0) defaultSpeed += 1
else defaultSpeed -= 1
scrollSpeed.textContent = defaultSpeed
GM_setValue('speed', defaultSpeed)
}
// 按下事件
function press(e) {
// 设置只有在速度显示区域才能拖动
if (e.target.id === 'scroll-speed') {
// 记录位置
pressPosition.top = e.clientY - e.currentTarget.offsetTop
pressPosition.left = e.clientX - e.currentTarget.offsetLeft
// 修改样式显示
scrollSpeed.style.cursor = 'move'
// 开始监听移动事件
document.addEventListener('mousemove', move)
document.addEventListener('mouseup', release)
}
}
// 移动事件
function move(e) {
const top = e.clientY - pressPosition.top
const left = e.clientX - pressPosition.left
scrollContainer.style.right = `unset`
scrollContainer.style.top = `${top}px`
scrollContainer.style.left = `${left}px`
}
// 抬起事件
function release(e) {
// 修改样式显示
scrollSpeed.style.cursor = 's-resize'
// 清除事件
document.removeEventListener('mousemove', move)
document.removeEventListener('mouseup', release)
}
// 添加自定义样式
GM_addStyle(`
.scroll-container {
position: fixed;
top: 50%;
right: 10px;
z-index: 99999;
text-align: center;
transform: translateY(-50%);
border-radius: 20px;
overflow: hidden;
background-color: rgba(204, 204, 204, 0.4);
line-height: 40px;
color: rgba(60, 60, 67, .92);
}
.scroll-up,
.scroll-down {
width: 40px;
height: 40px;
text-align: center;
}
.scroll-up::after,
.scroll-down::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
font-size: 16px;
box-sizing: border-box;
border-width: 2px;
border-style: solid;
}
.scroll-up::after {
transform: rotate(-45deg);
border-color: rgba(60, 60, 67, .92) rgba(60, 60, 67, .92) transparent transparent;
margin-top: 14.3425px;
}
.scroll-down::after {
transform: rotate(-45deg);
border-color: transparent transparent rgba(60, 60, 67, .92) rgba(60, 60, 67, .92);
margin-top: 8.685px;
}
.scroll-up:hover,
.scroll-down:hover {
background-color: rgba(204, 204, 204, 0.8);
}
.scroll-speed {
font-size: 18px;
user-select: none;
cursor: s-resize;
}
`)
})()