边缘下滑刷新

山寨自神奇浏览器，效果一般，将就用。
目前为 2023-04-01 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         边缘下滑刷新
// @namespace    https://gf.qytechs.cn/zh-CN/users/954189
// @version      2.5
// @description  山寨自神奇浏览器，效果一般，将就用。
// @author       angao
// @run-at document-end
// @license       MIT
// @match        https://*/*
// ==/UserScript==


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

//注入CSS
var style = document.createElement('style');
style.innerHTML = `
.Refresh_Icon {
    width: 42px;
    height: 42px;
    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: -42px;
    display: 'flex';
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.05s ease-out;
}
.Refresh_Icon svg {
  width: 24px;
  height: 24px;
  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 = 'flex'
document.body.appendChild(Icon)

//记录触摸点的纵坐标
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;
      }
});


let maxDistance = 110; // 最大下滑距离
let slowDownStart = 80; // 开始减速的位置
let slowDownRate = 0.2; // 减速比率

//阻止屏幕滑动，并使图标下移并旋转
document.addEventListener('touchmove', function(e) {
    if (mark) {
        e.preventDefault();
    }
    if (startY !== null) {
        let distance = e.touches[0].clientY - startY;
        if (distance < 120) {
    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 * 5}deg)`;
    }
}, { passive: false });

//记录离开点
document.addEventListener('touchend', function(e) {
    if (startY !== null ) {
        endY = e.changedTouches[0].clientY;
// 向下滑动超过120像素则刷新
    if (endY - startY > 120) {
         location.reload();
    }
}
    Icon.style.transition = 'all 0.5s';
    Icon.style.transform = 'translate(-50%, -42px) rotate(-360deg)';
    setTimeout(() => {
        Icon.style.transition = '';
    }, 500);

    startY = null;
    endY = null;
    mark = 0;
});
欢迎访问Greasy Fork镜像
