边缘下滑刷新.改

在屏幕左右边缘下滑时刷新网页
Wrap lines
// ==UserScript==
// @name         边缘下滑刷新.改
// @version      1.8
// @description  在屏幕左右边缘下滑时刷新网页
// @author       angao
// @run-at       document-end
// @license       MIT
// @match        *://*/*
// @namespace https://gf.qytechs.cn/users/452911
// ==/UserScript==
 
(function EdgeSlideRefresh() {
    'use strict';
 
    // 设置刷新图标大小
    const setRefreshIconSize = () => {
        if (window.innerWidth < window.innerHeight) {
            document.querySelector('.Refresh_Icon').style.width = `calc(100vw / 11)`;
            document.querySelector('.Refresh_Icon').style.height = `calc(100vw / 11)`;
        } else {
            document.querySelector('.Refresh_Icon').style.width = `calc(100vh / 5)`;
            document.querySelector('.Refresh_Icon').style.height = `calc(100vh / 5)`;
        }
    }
 
    // 设置滑动刷新的距离阈值
    const Sliderefreshdistance = window.innerHeight * (window.innerWidth < window.innerHeight ? 1 / 4 : 2 / 3);
    let startY = null;
    let endY = null;
 
    // 创建样式
    var style = document.createElement('style');
    style.innerHTML = `.Refresh_Icon { border-radius: 50%; position: fixed; left: 50%; transform: translate(-50%, 0) translateZ(0); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); top: -${100 / 11}vw; align-items: center; justify-content: center; z-index: 99999999; background-color: white; transition: transform 0.05s ease-out; } .Refresh_Icon svg { width: calc(70% * 100vw / 11); height: calc(70% * 100vw / 11); margin: 0; }`;
    document.head.appendChild(style);
 
    // 创建刷新图标元素
    const Icon = document.createElement('div');
    Icon.className = 'Refresh_Icon';
    Icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>`;
 
    Icon.style.display = 'none';
    document.body.appendChild(Icon);
 
    setRefreshIconSize();
 
    window.addEventListener('resize', setRefreshIconSize);
 
    // 触摸开始事件监听
    document.addEventListener('touchstart', function(e) {
        if (e.touches[0].clientX < window.innerWidth / 18 || e.touches[0].clientX > window.innerWidth * 17 / 18) {
            startY = e.touches[0].clientY;
            Icon.style.display = 'flex';
        }
    });
 
    // 触摸移动事件监听
    document.addEventListener('touchmove', function(e) {
        if (startY !== null && (e.touches[0].clientX < window.innerWidth / 18 || e.touches[0].clientX > window.innerWidth * 17 / 18)) {
            e.preventDefault();
            let distance = e.touches[0].clientY - startY;
            let slowDownStart = Sliderefreshdistance * 0.6;
            let slowDownRate = 0.2;
            if (distance < Sliderefreshdistance) {
                Icon.querySelector('svg').style.fill = 'black';
            } else {
                Icon.querySelector('svg').style.fill = 'darkred';
            }
            if (distance > slowDownStart) {
                distance = slowDownStart + (distance - slowDownStart) * slowDownRate;
            }
            distance = Math.min(distance, Sliderefreshdistance * 0.85);
            Icon.style.transform = `translate(-50%, ${distance / 1.35}px) rotate(${distance * 2}deg)`;
        }
    }, { passive: false });
 
    // 触摸结束事件监听
    document.addEventListener('touchend', function(e) {
        if (startY !== null && (e.changedTouches[0].clientX < window.innerWidth / 18 || e.changedTouches[0].clientX > window.innerWidth * 17 / 18)) {
            endY = e.changedTouches[0].clientY;
            if (endY - startY > Sliderefreshdistance) {
                setTimeout(function() {
                    location.reload();
                }, 250);
            }
            Icon.style.transition = 'all 0.5s';
            Icon.style.transform = 'translate(-50%, -42px)';
            setTimeout(() => {
                Icon.style.transition = '';
                Icon.style.display = 'none';
            }, 500);
            startY = null;
            endY = null;
        }
    });
})();
欢迎访问Greasy Fork镜像
