DisableScrollScript

禁止滚动
Wrap lines
// ==UserScript==
// @name         DisableScrollScript
// @namespace    http://tampermonkey.net/
// @version      2024.11.18.4
// @description  禁止滚动
// @author       荷塘月色
// @include      *://*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
  const wrapper = document.createElement('div')
  document.body.appendChild(wrapper)
  wrapper.classList.add('custom-wrapper')
  const dragEl = document.createElement('div')
  dragEl.classList.add('custom-drag-element')
  const defaultStyleClass = document.createElement('style')
  const hiddenStyleClass = document.createElement('style')
  const button = document.createElement('button')
  wrapper.appendChild(button)
  wrapper.appendChild(dragEl)
  document.head.appendChild(defaultStyleClass)
  button.innerText = '锁定'
  button.classList.add('custom-button')

  const offset = { x: 0, y: 0 }
  let isDragging = false

  dragEl.addEventListener('touchstart', e => {
    isDragging = true
    const touch = e.touches[0] // 获取第一个触摸点
    offset.x = touch.clientX - wrapper.getBoundingClientRect().left
    offset.y = touch.clientY - wrapper.getBoundingClientRect().top
    e.preventDefault()
  })

  dragEl.addEventListener('mousedown', (ev) => {
    isDragging = true
    offset.x = ev.clientX - wrapper.getBoundingClientRect().left
    offset.y = ev.clientY - wrapper.getBoundingClientRect().top
  })

  document.addEventListener('mousemove', function(e) {
    if (isDragging) {
      wrapper.style.left = (e.clientX - offset.x) + 'px'
      wrapper.style.top = (e.clientY - offset.y) + 'px'
    }
  })

  document.addEventListener('mouseup', function() {
    isDragging = false
  })

  document.addEventListener('touchmove', function(e) {
    if (isDragging) {
      const touch = e.touches[0] // 获取第一个触摸点
      wrapper.style.left = (touch.clientX - offset.x) + 'px'
      wrapper.style.top = (touch.clientY - offset.y) + 'px'
    }
  })

  document.addEventListener('touchend', function() {
    isDragging = false
  })

  button.addEventListener('click', () => {
    if (document.head.contains(hiddenStyleClass)) {
      document.head.removeChild(hiddenStyleClass)
      button.innerText = '锁定'
    } else {
      document.head.appendChild(hiddenStyleClass)
      button.innerText = '解锁'
    }
  })

  function Camel2Kebab(string) {
    return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
  }

  /* 通用 JSON 转 CSS 方法 */
  function Json2Css(complexStyleObject) {
    let cssString = ''

    for (const selector in complexStyleObject) {
      if (selector.startsWith('@')) { /* 处理媒体查询和其他@规则 */
        cssString += `${selector} { `
        for (const innerSelector in complexStyleObject[selector]) {
          cssString += `${innerSelector} { `
          const styles = complexStyleObject[selector][innerSelector]
          for (const prop in styles) {
            cssString += `${Camel2Kebab(prop)}: ${styles[prop]}; `
          }
          cssString += '} '
        }
        cssString += '} '
      } else {
        cssString += `${selector} { `
        const styles = complexStyleObject[selector]
        for (const prop in styles) {
          cssString += `${Camel2Kebab(prop)}: ${styles[prop]}; `
        }
        cssString += '} '
      }
    }

    return cssString
  }

  const hiddenStylesJSON = {
    '*': {
      // 'overflow': 'hidden !important',
      // 'touch-action': 'none'
    }
  }
  hiddenStyleClass.innerHTML = `${Json2Css(hiddenStylesJSON)}`

  const defaultStylesJSON = {
    '.custom-wrapper': {
      'zIndex': '10000',
      'position': 'fixed',
      'top': '10px',
      'left': '10px',
      'padding': '4px',
      'display': 'flex',
      'flexDirection': 'column',
      'gap': '4px',
      'background': 'rgb(255,255,255)',
      'border-radius': '2px',
      'border': '1px solid #666',
      'box-sizing': 'border-box',
    },
    '.custom-button': {
      'padding': '0.25em 1em',
      // 'border-radius': '4px 4px 0 0',
      'border-radius': '2px',
      'border': '1px solid #666',
      'cursor': 'pointer',
      'color': '#333',
      'font-size': '0.875em',
      'box-sizing': 'border-box',
    },
    '.custom-drag-element': {
      'width': '100%',
      'height': '6px',
      'background': 'rgba(0,0,0,0.25)',
      'border': '1px solid #666',
      // 'border-radius': '0 0 4px 4px',
      'border-radius': '2px',
      'cursor': 'pointer',
      'box-sizing': 'border-box',
    }
  }
  defaultStyleClass.innerHTML = `${Json2Css(defaultStylesJSON)}`

  function preventScroll(e) {
    if (document.head.contains(hiddenStyleClass))
      e.preventDefault()
  }

  window.addEventListener('wheel', preventScroll, { passive: false }) // 鼠标滚轮
  window.addEventListener('touchmove', preventScroll, { passive: false }) // 移动设备触摸滑动

  // 确保按钮能在页面里
  setInterval(() => {
    if (!document.body.contains(wrapper)) {
      document.body.appendChild(wrapper)
    }
  }, 100)
})()
欢迎访问Greasy Fork镜像
