手机浏览器增加左滑前进右滑后退功能

来自缓存
Greasy Fork is available in English.
手机浏览器增加左滑前进右滑后退功能

模拟实现夸克手机浏览器的左滑后退右滑前进功能
当前为 2023-04-15 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         手机浏览器增加左滑前进右滑后退功能
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  模拟实现夸克手机浏览器的左滑后退右滑前进功能
// @author       企鹅吧
// @match        *://*/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=google.com
// @grant        none
// @license      MIT 
// ==/UserScript==
(function () {
  'use strict';
  const distance = 50
  const arrowCss = `
      position: fixed;
      top: 50%;
      width: ${distance}px;
      height: ${distance}px;
      line-height: ${distance}px;
      text-align: center;
      background: rgba(0,0,0,.4);
      color: #fff;
    `
  const leftArrow = document.createElement('div')
  leftArrow.innerHTML = `←`
  leftArrow.style.cssText = arrowCss
  leftArrow.style.left = `0`
  leftArrow.style['border-radius'] = `0 10px 10px 0`
  leftArrow.style.transform = `translate3d(-100%, -50%, 0)`
 
  const rightArrow = document.createElement('div')
  rightArrow.innerHTML = `→`
  rightArrow.style.cssText = arrowCss
  rightArrow.style.right = `0`
  rightArrow.style['border-radius'] = `10px 0 0 10px`
  rightArrow.style.transform = `translate3d(100%, -50%, 0)`
 
  const docBody = document.body
  docBody.appendChild(leftArrow)
  docBody.appendChild(rightArrow)
  
  function canScroll (el) {
      if (el === document.body) return false
      if (el.scrollWidth > el.clientWidth) {
          return true
      } else {
          return canScroll(el.parentNode)
      }
  }
 
 
  let startX,
    startY,
    direction = null
  docBody.addEventListener('touchstart', e => {
    direction = null
    startX = e.changedTouches[0].pageX
    startY = e.changedTouches[0].pageY
  })
 
  docBody.addEventListener('touchmove', e => {
    if (canScroll(e.target)) return
    const moveX = e.changedTouches[0].pageX
    const moveY = e.changedTouches[0].pageY
    const offsetX = moveX - startX
    const offsetY = moveY - startY
    // console.log('offset X Y: ', offsetX, offsetY)
    if (Math.abs(offsetY) > 5) return // 上下滑动不作处理
    const isToLeft = offsetX < 0
    if (isToLeft) { // 右往左滑
      console.log('toleft')
      if (direction === 'toRight') return
      direction = 'toLeft'
      const x = distance + offsetX
      const translateX = x <= 0 ? 0 : x
      rightArrow.style.transform = `translate3d(${translateX}px, -50%, 0)`
    } else { // 左往右滑
      if (direction === 'toLeft') return
      direction = 'toRight'
      const x = -distance + offsetX
      const translateX = x >= 0 ? 0 : x
      leftArrow.style.transform = `translate3d(${translateX}px, -50%, 0)`
    }
  })
 
  docBody.addEventListener('touchend', e => {
    const endX = e.changedTouches[0].pageX
    const offset = endX - startX
 
    leftArrow.style.transform = `translate3d(-100%, -50%, 0)`
    rightArrow.style.transform = `translate3d(100%, -50%, 0)`
    if (direction === 'toLeft' && offset < -distance) {
      console.log("右往左滑,前进")
      window.history.go(1)
    } else if (direction === 'toRight' && offset > distance) {
      console.log("左往左滑,后退")
      window.history.go(-1)
    }
  })
})()