边缘下滑刷新

山寨自神奇浏览器
目前为 2023-03-31 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         边缘下滑刷新
// @namespace    https://gf.qytechs.cn/zh-CN/users/954189
// @version      1.1
// @description  山寨自神奇浏览器
// @author       angao
// @license       MIT
// @match        https://*/*
// ==/UserScript==

let startY = null;
let endY = null;
let mark = 0;

// 添加刷新图标元素
const refreshIcon = document.createElement('div');
refreshIcon.innerHTML = '↓';
refreshIcon.style.position = 'fixed';
refreshIcon.style.top = '0';
refreshIcon.style.left = '50%';
refreshIcon.style.transform = 'translateX(-50%)';
refreshIcon.style.zIndex = '99999999';
refreshIcon.style.color = 'white';
refreshIcon.style.display = 'none'; // 默认隐藏刷新图标
document.body.appendChild(refreshIcon);

//记录触摸点的纵坐标
document.addEventListener('touchstart', function(e) {
    if (e.touches[0].clientX < 30 || e.touches[0].clientX > window.innerWidth - 30) {
        startY = e.touches[0].clientY;
        mark = 1;
    }
});

//阻止该区域滑动
document.addEventListener('touchmove', function(e) {
    if (mark) {
        e.preventDefault();
    }
}, { passive: false });

//记录离开点的纵坐标
document.addEventListener('touchend', function(e) {
    if (startY !== null ) {
        endY = e.changedTouches[0].clientY;
// 向下滑动超过110像素则刷新
    if (endY - startY > 110) {
         location.reload();
    }
}

    // 重置
    startY = null;
    endY = null;
    mark = 0;
});

// 在下滑过程中显示刷新图标
document.addEventListener('touchmove', function(e) {
    if (startY !== null ) {
        const distance = Math.min(e.touches[0].clientY - startY, 110); // 限制下滑距离不超过 110 像素
        let rotateDeg = 0;
        if (distance > 100) {
            rotateDeg = (distance - 100) * 18;
        }
        refreshIcon.style.transform = `translate(-50%, ${distance}px) rotate(${rotateDeg}deg) scale(4)`; // 旋转/下落速度、图标大小
        refreshIcon.style.display = 'block'; // 显示刷新图标
    }
});

// 松手隐藏
document.addEventListener('touchend', function(e) {
    refreshIcon.style.transform = 'translateX(-50%)';
    refreshIcon.style.display = 'none'; // 隐藏刷新图标
});
欢迎访问Greasy Fork镜像
