边缘下滑刷新

山寨自神奇浏览器，效果一般，将就用。
目前為 2023-05-02 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         边缘下滑刷新
// @namespace    https://gf.qytechs.cn/zh-CN/users/954189
// @version      2.6
// @description  山寨自神奇浏览器，效果一般，将就用。
// @author       angao
// @run-at       document-end
// @license       MIT
// @match        *://*/*
// ==/UserScript==

(function EdgeSlideRefresh() {
  let startY = null;
  let endY = null;
  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";
  Icon.style.width = "42px";
  Icon.style.height = "42px";
  Icon.style.borderRadius = "50%";
  Icon.style.position = "fixed";
  Icon.style.left = "50%";
  Icon.style.transform = "translate(-50%,0) translateZ(0)";
  Icon.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
  Icon.style.top = "-42px";
  Icon.style.alignItems = "center";
  Icon.style.justifyContent = "center";
  Icon.style.zIndex = "99999999";
  Icon.style.backgroundColor = "white";
  const svg = Icon.querySelector("svg");
  svg.style.width = "28px";
  svg.style.height = "28px";
  svg.style.margin = "0";
  document.body.appendChild(Icon);

  document.addEventListener("touchstart", (e) => {
    if (e.touches[0].clientX < window.innerWidth / 15 || e.touches[0].clientX > window.innerWidth / 15 * 14) {
      startY = e.touches[0].clientY;
      Icon.style.display = "flex";
    }
  });

  document.addEventListener(
    "touchmove",
    (e) => {
      if (startY !== null) {
        e.preventDefault();
        let distance = e.touches[0].clientY - startY;
        const maxDistance = 110;
        const slowDownStart = 80;
        const slowDownRate = 0.2;
        svg.style.fill = distance < 140 ? "black" : "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", (e) => {
    if (startY !== null) {
      endY = e.changedTouches[0].clientY;
      if (endY - startY > 140) {
        setTimeout(() => location.reload(), 250);
      }
      Icon.style.transition = "all 0.5s";
      Icon.style.transform = "translate(-50%, -42px)";
      setTimeout(() => {
        Icon.style.transition = "";
        svg.style.fill = "black";
        Icon.style.display = "none";
      }, 200);
      startY = null;
      endY = null;
    }
  });
})();
欢迎访问Greasy Fork镜像
