在屏幕左右边缘下滑时刷新网页
// ==UserScript==
// @name 边缘下滑刷新.改
// @version 1.8
// @description 在屏幕左右边缘下滑时刷新网页
// @author angao
// @run-at document-end
// @license MIT
// @match *://*/*
// @namespace https://greasyfork.org/users/452911
// ==/UserScript==
(function EdgeSlideRefresh() {
'use strict';
// 设置刷新图标大小
const setRefreshIconSize = () => {
if (window.innerWidth < window.innerHeight) {
document.querySelector('.Refresh_Icon').style.width = `calc(100vw / 11)`;
document.querySelector('.Refresh_Icon').style.height = `calc(100vw / 11)`;
} else {
document.querySelector('.Refresh_Icon').style.width = `calc(100vh / 5)`;
document.querySelector('.Refresh_Icon').style.height = `calc(100vh / 5)`;
}
}
// 设置滑动刷新的距离阈值
const Sliderefreshdistance = window.innerHeight * (window.innerWidth < window.innerHeight ? 1 / 4 : 2 / 3);
let startY = null;
let endY = null;
// 创建样式
var style = document.createElement('style');
style.innerHTML = `.Refresh_Icon { border-radius: 50%; position: fixed; left: 50%; transform: translate(-50%, 0) translateZ(0); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); top: -${100 / 11}vw; align-items: center; justify-content: center; z-index: 99999999; background-color: white; transition: transform 0.05s ease-out; } .Refresh_Icon svg { width: calc(70% * 100vw / 11); height: calc(70% * 100vw / 11); margin: 0; }`;
document.head.appendChild(style);
// 创建刷新图标元素
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);
setRefreshIconSize();
window.addEventListener('resize', setRefreshIconSize);
// 触摸开始事件监听
document.addEventListener('touchstart', function(e) {
if (e.touches[0].clientX < window.innerWidth / 18 || e.touches[0].clientX > window.innerWidth * 17 / 18) {
startY = e.touches[0].clientY;
Icon.style.display = 'flex';
}
});
// 触摸移动事件监听
document.addEventListener('touchmove', function(e) {
if (startY !== null && (e.touches[0].clientX < window.innerWidth / 18 || e.touches[0].clientX > window.innerWidth * 17 / 18)) {
e.preventDefault();
let distance = e.touches[0].clientY - startY;
let slowDownStart = Sliderefreshdistance * 0.6;
let slowDownRate = 0.2;
if (distance < Sliderefreshdistance) {
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, Sliderefreshdistance * 0.85);
Icon.style.transform = `translate(-50%, ${distance / 1.35}px) rotate(${distance * 2}deg)`;
}
}, { passive: false });
// 触摸结束事件监听
document.addEventListener('touchend', function(e) {
if (startY !== null && (e.changedTouches[0].clientX < window.innerWidth / 18 || e.changedTouches[0].clientX > window.innerWidth * 17 / 18)) {
endY = e.changedTouches[0].clientY;
if (endY - startY > Sliderefreshdistance) {
setTimeout(function() {
location.reload();
}, 250);
}
Icon.style.transition = 'all 0.5s';
Icon.style.transform = 'translate(-50%, -42px)';
setTimeout(() => {
Icon.style.transition = '';
Icon.style.display = 'none';
}, 500);
startY = null;
endY = null;
}
});
})();