electron 不支持Ctrl+滚动条放大缩小，自己动手做了一个react组件

前言：功能是不难的，看过代码之后，肯定能理解，肯定。重点说明，这仅仅是为了electron打包做的需求，一般是不会有这样的需求，因为浏览器都带有这样的功能！！！说三遍！！说三遍！！说三遍！！

ScrollBox.tsx

import React, { useEffect, useRef, useState } from 'react'
import { Button } from 'antd'
let size = 1 // 默认大小
let timer = null // 定时器关闭

export default ({ claName }) => {
  const [isZoom, setIsZoom] = useState(false) // 是否显示控制器
  const [isOver, setIsOver] = useState(false) // 是否显示控制器
  const [per, setPer] = useState(100) // 控制器百分数

  useEffect(() => {
    start() // 绑定键盘滚轮事件
  }, [])

  // 放大
  function zoomOut() {
    size = size >= 3 ? size:  size + 0.05;
    const num = +Math.floor(size * 100).toFixed(0)
    setPer(num)
    set();
  }

  // 缩小
  function zooMin() {
    size = size <= 0.6 ? size : size - 0.05;
    const num = +Math.floor(size * 100).toFixed(0)
    setPer(num)
    set();
  }

  // 放大缩小修改样式
  function set() {
    setIsZoom(true)
    const divElement = document.querySelector(`.${claName}`)
    // @ts-ignore
    divElement.style.zoom = size+'';
    // @ts-ignore
    divElement.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
    // document.body.style.zoom = size+'';
    // document.body.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
  }

  // 重置
  function reset() {
    size = 1
    setPer(100)
    const divElement = document.querySelector(`.${claName}`)
    // @ts-ignore
    divElement.style.zoom = size+'';
    // @ts-ignore
    divElement.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
  }

  // 启动
  function start() {
    const userAgent = navigator.userAgent
    if (userAgent.includes('NativeClient')) {
      document.onkeydown = e => {
        const key = e.key // Control
        window.onmousewheel = (e: any) => {
          const wheelDelta = e.wheelDelta
          if (key === 'Control' && wheelDelta > 0) {
            zoomOut()
          } else if (key === 'Control' && wheelDelta < 0) {
            zooMin()
          }
        }
      }
      document.onkeyup = e => {
        const key = e.key // Control
        if (key === 'Control') {
          window.onmousewheel = null
          // @ts-ignore
          timer = setTimeout(() => {
            setIsZoom(false)
            timer = null
          }, 1500)
        }
      }
    }
  }

  // 鼠标放在控制器不消失
  const mouseOver = () => {
    setIsOver(true)
  }

  // 鼠标离开控制器消失
  const mouseOut = () => {
    setIsOver(false)
    setIsZoom(false)
  }

  const scrollBoxStyle: any = {
    position: 'absolute',
    top: '20px',
    right: '30px',
    padding: '5px 12px',
    boxShadow: '0 1px 1px #999',
    cursor: 'default',
    userSelect: 'none',
  }

  return (
    <div>
      {
        isZoom || isOver ? <div style={scrollBoxStyle} onMouseEnter={mouseOver} onMouseLeave={mouseOut}>
          <span style={{ marginRight: '50px' }}>{per}%</span>
          <span style={{ padding: '5px 12px',fontSize: '20px' }} onClick={zooMin}>-</span>
          <span style={{ padding: '5px 12px',fontSize: '20px' }} onClick={zoomOut}>+</span>
          <Button onClick={reset}>重置</Button>
        </div> : ''
      }
    </div>
  )
}

　　

使用方式：

在最外层的tsx文件中引入，比如说你的内容都包含在一个父div下，就把上面那个组件引入最大的.tsx文件下面，与包含所有的那个父div并列，如下：

import React from 'react'
import ScrollBox from '@/components/ScrollBox'
import Login from '@/pages/login/index'

export default () => {
  const click = () => {
  }
  return (
    <div>
      <div>
        <ScrollBox claName={'ssss'}></ScrollBox> // 滚动组件
        <Login className={'ssss'}></Login> // 我的所有内容都在这个组件下面，className要保持一致，因为是根据className找到对应的标签进行操作，至于为什么不对bady操作，因为操作body会导致控制器也跟着变大变小，与谷歌自带的功能相违背
      </div>
    </div>
  )
}