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
    })
  }
}
相关推荐
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
TESmart碲视15 小时前
HKS201-M24 大师版 8K60Hz USB 3.0 适用于 2 台 PC 1台显示器 无缝切换 KVM 切换器
单片机·嵌入式硬件·物联网·游戏·计算机外设·电脑·智能硬件
景行产品分享15 小时前
2025年游戏鼠标推荐,游戏鼠标推荐,打CSGO(罗技、雷蛇、卓威、ROG、漫步者、赛睿、达尔优)
计算机外设
jubobolv36915 小时前
[深度学习环境踩坑记录]ubuntu22.04安装RTX3060驱动,黑屏、桌面只有壁纸和鼠标,一顿折腾
计算机外设·持续部署
vfvfb2 天前
定时点击二次鼠标 定时点击鼠标
计算机外设·自动点击·定时点击鼠标·倒计时点击鼠标·定时点击
szekl2 天前
HDMI 2.0 4×2矩阵切换器412HN——多信号输入输出的高清解决方案
linux·矩阵·计算机外设·电脑·ekl
zfysis3 天前
键盘第一下无反应
计算机外设
Allen Bright13 天前
【JS-4.4-键盘常用事件】深入理解DOM键盘事件:提升用户交互体验的关键
javascript·计算机外设·交互
小天源14 天前
鼠标自动录制软件下载及使用
自动化测试·自动化·计算机外设·mouse recorder·鼠标录制·鼠标宏
小池先生14 天前
罗技键盘k380 fn按键问题 按f12不能直接打开调试,需要fn+f12
计算机外设