对边缘下滑刷新脚本进行的一些更改
// ==UserScript== // @name 边缘下滑刷新•改 // @namespace http://tampermonkey.net/ // @version 2.7.4 // @description 对边缘下滑刷新脚本进行的一些更改 // @author angao // @run-at document-start // @license MIT // @match *://*/* // @grant none // ==/UserScript== (function EdgeSlideRefresh() { 'use strict'; // 获取屏幕宽度和高度 let screenWidth = window.innerWidth; let screenHeight = window.innerHeight; //下拉刷新距离 let Sliderefreshdistance = screenHeight * 1/3; let startY = null; let endY = null; //注入CSS var style = document.createElement('style'); document.head.appendChild(style); function refreshSize() { // 旋转后重载获取屏幕宽度和高度 screenWidth = window.innerWidth; screenHeight = window.innerHeight; //旋转后重载下拉刷新距离 Sliderefreshdistance = screenHeight * 1/3; 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: ${screenWidth / -10}px; align-items: center; justify-content: center; z-index: 99999999999; background-color: white; border-radius: 50%; transition: transform .05s ease-out; } .Refresh_Icon svg { width: ${screenWidth / 12}px; height: ${screenWidth / 12}px; margin: 0; } `; } refreshSize(); // 旋转时更新 screen.orientation.addEventListener("change", refreshSize); // 创建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) { var target = e.target; while (target && target !== document.body) { target = target.parentNode; } if ( e.touches[0].clientY < screenHeight * 2/5 && target === document.body) { if (e.touches[0].clientX < 42 || e.touches[0].clientX > screenWidth - 42){ startY = e.touches[0].clientY; Icon.style.display = 'flex'; } } else { startY = null; } }); //下滑时阻止网页滑动,并使刷新图标随之下移、旋转 document.addEventListener('touchmove', function(e) { if (startY !== null && startY < screenHeight * 2/5) { e.preventDefault(); let distance = e.touches[0].clientY - startY; let turnone = distance/screenHeight; let maxDistance = Sliderefreshdistance * 0.7; // 最大下滑距离 let slowDownStart = Sliderefreshdistance * 0.5; // 开始减速的位置 let slowDownRate = 0.2; // 减速比率 if (distance < Sliderefreshdistance) { Icon.querySelector('svg').style.fill = 'black'; } else { Icon.querySelector('svg').style.fill = 'blue'; } if (distance > slowDownStart) { distance = slowDownStart + (distance - slowDownStart) * slowDownRate; } distance = Math.min(distance, maxDistance); Icon.style.transform = screenHeight>screenWidth ? `translate(-50%, ${distance/1.7}px) rotate(${turnone * 4}turn)` : `translate(-50%, ${distance*1.4}px) rotate(${turnone * 3}turn)`; } }, { passive: false }); //记录离开点,并使刷新图标返回 document.addEventListener('touchend', function(e) { if (startY !== null) { endY = e.changedTouches[0].clientY; // 向下滑动超过刷新距离则刷新 if (endY - startY > Sliderefreshdistance) { setTimeout(function() { location.reload(); }, 20); } else if (endY == null) { distance = 0; } Icon.style.transition = 'all 0.5s'; Icon.style.transform = 'translate(-50%, -42px)'; setTimeout(() => { Icon.style.transition = ''; }, 20); startY = null; endY = null; } }); })();