// ==UserScript==
// @name 上下翻页按钮
// @version 1.4
// @description 添加浮动按钮以进行上下翻页。
// @author DeepSeek
// @match *://*/*
// @run-at document-end
// @grant none
// @namespace https://greasyfork.org/users/452911
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
// 通用样式:移除点击时的蓝色高亮
const noTapHighlightStyle = `
-webkit-tap-highlight-color: transparent;
outline: none;
user-select: none;
`;
// 创建 SVG 上箭头图标(黑色)
const upSvg = `
`;
// 创建 SVG 下箭头图标(黑色)
const downSvg = `
`;
// 创建上翻按钮
const upButton = document.createElement('div');
upButton.innerHTML = upSvg;
upButton.style.cssText = `
position: fixed;
right: 10px;
top: 40%;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
transition: opacity 0.2s;
${noTapHighlightStyle}
`;
// 创建下翻按钮
const downButton = document.createElement('div');
downButton.innerHTML = downSvg;
downButton.style.cssText = `
position: fixed;
right: 10px;
top: calc(40% + 80px);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
transition: opacity 0.2s;
${noTapHighlightStyle}
`;
// 悬停效果
upButton.addEventListener('mouseenter', () => upButton.style.opacity = '0.8');
upButton.addEventListener('mouseleave', () => upButton.style.opacity = '1');
downButton.addEventListener('mouseenter', () => downButton.style.opacity = '0.8');
downButton.addEventListener('mouseleave', () => downButton.style.opacity = '1');
// 滚动事件
upButton.addEventListener('click', () => {
window.scrollBy(0, -window.innerHeight * 0.8);
});
downButton.addEventListener('click', () => {
window.scrollBy(0, window.innerHeight * 0.8);
});
// 将按钮添加到文档中
document.body.appendChild(upButton);
document.body.appendChild(downButton);
})();