上下翻页按钮

Greasy Fork is available in English.
上下翻页按钮

添加浮动按钮以进行上下翻页。
换行
// ==UserScript==
// @name         上下翻页按钮
// @version      1.4
// @description  添加浮动按钮以进行上下翻页。
// @author       DeepSeek
// @match        *://*/*
// @run-at       document-end
// @grant        none
// @namespace http://greasyfork.icu/users/452911
// ==/UserScript==

(function() {
    'use strict';

    // 通用样式：移除点击时的蓝色高亮
    const noTapHighlightStyle = `
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none;
    `;

    // 创建 SVG 上箭头图标（黑色）
    const upSvg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="18 15 12 9 6 15"></polyline>
        </svg>
    `;

    // 创建 SVG 下箭头图标（黑色）
    const downSvg = `
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    `;

    // 创建上翻按钮
    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);
})();