边缘下滑刷新

Greasy Fork is available in English.
边缘下滑刷新

山寨自神奇浏览器
当前为 2023-03-31 提交的版本，查看最新版本。
换行
// ==UserScript==
// ==UserScript==
// @name         边缘下滑刷新
// @namespace    http://greasyfork.icu/zh-CN/users/954189
// @version      1.2
// @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 > 120) {
         location.reload();
    }
}

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

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

// 在离开时重置刷新图标的 transform 属性并隐藏它
document.addEventListener('touchend', function(e) {
    refreshIcon.style.transform = 'translateX(-50%)';
    refreshIcon.style.display = 'none'; // 隐藏刷新图标
});