overflow-x: auto 使用鼠标实现横向滚动,区分触摸板和鼠标滚动事件的方法

假设一个 div 的滚动只设置了 overflow-x: auto 我们发现使用鼠标的滚轮是无法左右滚动的,但是使用笔记本电脑的触摸板,或者在移动设备上是可以滚动的。所以我们需要兼容一下鼠标的横向滚动功能。

我们可以监控 wheel 事件,然后根据位置来计算滚动的距离,不能使用 mousewheel 因为 mousewheel 事件在火狐浏览器并不支持,mousewheel 已经逐渐被 wheel 事件代替。

区分触摸板和鼠标滚轮

触摸板支持的横向滚动十分丝滑,如果不区分鼠标滚轮和触摸板,把所有的 wheel 事件都用新写的方法,那么使用触摸板滑动的时候体验很不好,容易左右抖动。这是因为触摸板的 wheel 事件触发的频率相对于鼠标滚轮高很多。所以我们要保留触摸板原生支持的横向滚动方法,然后重写一下鼠标触发的 wheel 事件。

下面是区分触摸板和鼠标 wheel 事件的方法。

javascript 复制代码
 const checkIsTrackpad = e => {
    if (isSafari()) {
      return e.deltaMode === 0 && Math.floor(Math.abs(e.wheelDeltaY)) < 4
    }
    if (isFireFox()) {
      return (
        e.deltaMode === WheelEvent.DOM_DELTA_PIXEL ||
        (typeof e.MozInputSource !== 'undefined' && e.MozInputSource === 5)
      )
    }
    // 鼠标滚轮通常以 120 为步长
    return e.sourceCapabilities?.firesTouchEvents || (e.constructor.name === 'WheelEvent' && e.wheelDeltaY % 120 !== 0)
  }

所以一个 div 的横向滚动的方法如下:

javascript 复制代码
const onMouseWheel = e => {
  // 触摸板滚动
  const checkIsTrackpad = e => {
    if (isSafari()) {
      return e.deltaMode === 0 && Math.floor(Math.abs(e.wheelDeltaY)) < 4
    }
    if (isFireFox()) {
      return (
        e.deltaMode === WheelEvent.DOM_DELTA_PIXEL ||
        (typeof e.MozInputSource !== 'undefined' && e.MozInputSource === 5)
      )
    }
    // 鼠标滚轮通常以 120 为步长
    return e.sourceCapabilities?.firesTouchEvents || (e.constructor.name === 'WheelEvent' && e.wheelDeltaY % 120 !== 0)
  }
  const isTrackPad = checkIsTrackpad(e)
  if (isTrackPad) {
    return
  }
  // 鼠标滚动
  e.preventDefault()
  const delta = e.deltaY || e.deltaX
  //  serviceScrollContentEle 是 设置为 overflow-x: auto 的 div
  serviceScrollContentEle.value.scrollLeft += delta * (e.shiftKey ? 3 : 2)
  if (!isScrolling) {
    isScrolling = true
    // 使用这个方法更好
    requestAnimationFrame(() => {
      isScrolling = false
    })
  }
}
相关推荐
vfvfb1 天前
定时点击二次鼠标 定时点击鼠标
计算机外设·自动点击·定时点击鼠标·倒计时点击鼠标·定时点击
szekl1 天前
HDMI 2.0 4×2矩阵切换器412HN——多信号输入输出的高清解决方案
linux·矩阵·计算机外设·电脑·ekl
zfysis2 天前
键盘第一下无反应
计算机外设
Allen Bright12 天前
【JS-4.4-键盘常用事件】深入理解DOM键盘事件:提升用户交互体验的关键
javascript·计算机外设·交互
小天源13 天前
鼠标自动录制软件下载及使用
自动化测试·自动化·计算机外设·mouse recorder·鼠标录制·鼠标宏
小池先生13 天前
罗技键盘k380 fn按键问题 按f12不能直接打开调试,需要fn+f12
计算机外设
ai.Neo14 天前
(双模第2期)基于Nordic nRF52832的蓝牙键盘主控设计全流程详解
计算机外设
一眼青苔16 天前
vs code 如何开启按住ctrl和滚动鼠标来缩放字体大小
计算机外设
木尧大兄弟16 天前
Cubase 通过 MIDIPLUS MIDI 键盘进行走带控制的设置方法
计算机外设
老猿阿浪17 天前
React Native WebView键盘难题:如何让输入框不被键盘遮挡?
react native·react.js·计算机外设