边缘下滑刷新.改

修改自angao的边缘下滑刷新脚本
目前为 2024-03-20 提交的版本。查看最新版本。
换行
// ==UserScript==
// @name         边缘下滑刷新.改
// @version      1.2
// @description  修改自angao的边缘下滑刷新脚本
// @author       angao
// @run-at       document-end
// @license       MIT
// @match        *://*/*
// @namespace https://gf.qytechs.cn/users/452911
// ==/UserScript==

(function EdgeSlideRefresh() {
    'use strict';
    setTimeout(function () {
        // 获取屏幕宽度和高度
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        // 下滑刷新距离
        const Sliderefreshdistance = screenHeight * 1 / 2;

        let startY = null;
        let endY = null;

        // 注入CSS
        var style = document.createElement('style');
        style.innerHTML = `
.Refresh_Icon {
    width: ${screenWidth / 10}px;
    height: ${screenWidth / 10}px;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0) translateZ(0);
    box-Shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    top: -${screenHeight / 10}px;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-out; /* 更改为 0.2s */
}

@media screen and (orientation: landscape) {
    .Refresh_Icon {
        width: ${screenWidth / 15}px;
        height: ${screenWidth / 15}px;
    }
}

.Refresh_Icon svg {
    width: ${screenWidth / 12}px;
    height: ${screenWidth / 12}px;
    margin: 0;
}
`;
        document.head.appendChild(style);

        // 创建DOM绑定方法
        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);

        // 记录触摸点的纵坐标
        document.addEventListener('touchstart', function (e) {
            if (e.touches[0].clientX < screenWidth / 15 || e.touches[0].clientX > screenWidth / 15 * 14) {
                startY = e.touches[0].clientY;
                Icon.style.display = 'flex';
            }
        });

        // 下滑时使刷新图标随之下移、旋转
        document.addEventListener('touchmove', function (e) {
            if (startY !== null) {
                let distance = e.touches[0].clientY - startY;
                let maxDistance = Sliderefreshdistance * 0.85; // 最大下滑距离
                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, maxDistance);
                Icon.style.transform = `translate(-50%, ${distance / 1.35}px) rotate(${distance * 2}deg)`;
            }
        }, { passive: false });

        // 记录离开点，并使刷新图标返回
        document.addEventListener('touchend', function (e) {
            if (startY !== null) {
                endY = e.changedTouches[0].clientY;
                // 向下滑动超过1/2屏幕高度则刷新
                if (endY - startY > Sliderefreshdistance) {
                    setTimeout(function () {
                        location.reload();
                    }, 250);
                }
                Icon.style.transition = 'all 0.5s';
                Icon.style.transform = `translate(-50%, -${screenHeight / 10}px)`;
                setTimeout(() => {
                    Icon.style.transition = '';
                }, 200);
                startY = null;
                endY = null;
            }
        });
    }, 500);
})();
欢迎访问Greasy Fork镜像
