overflow-x: auto 使用鼠标实现横向滚动，区分触摸板和鼠标滚动变乱的方法 ...

假设一个 div 的滚动只设置了 overflow-x: auto 我们发现使用鼠标的滚轮是无法左右滚动的，但是使用条记本电脑的触摸板，或者在移动装备上是可以滚动的。以是我们必要兼容一下鼠标的横向滚动功能。
我们可以监控 wheel 变乱，然后根据位置来盘算滚动的距离，不能使用 mousewheel 由于 mousewheel 变乱在火狐欣赏器并不支持，mousewheel 已经逐渐被 wheel 变乱代替。

区分触摸板和鼠标滚轮

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

1. const checkIsTrackpad = e => {
2.     if (isSafari()) {
3.       return e.deltaMode === 0 && Math.floor(Math.abs(e.wheelDeltaY)) < 4
4.     }
5.     if (isFireFox()) {
6.       return (
7.         e.deltaMode === WheelEvent.DOM_DELTA_PIXEL ||
8.         (typeof e.MozInputSource !== 'undefined' && e.MozInputSource === 5)
9.       )
10.     }
11.     // 鼠标滚轮通常以 120 为步长
12.     return e.sourceCapabilities?.firesTouchEvents || (e.constructor.name === 'WheelEvent' && e.wheelDeltaY % 120 !== 0)
13.   }

复制代码

以是一个 div 的横向滚动的方法如下：

1. const onMouseWheel = e => {  // 触摸板滚动  const checkIsTrackpad = e => {
2.     if (isSafari()) {
3.       return e.deltaMode === 0 && Math.floor(Math.abs(e.wheelDeltaY)) < 4
4.     }
5.     if (isFireFox()) {
6.       return (
7.         e.deltaMode === WheelEvent.DOM_DELTA_PIXEL ||
8.         (typeof e.MozInputSource !== 'undefined' && e.MozInputSource === 5)
9.       )
10.     }
11.     // 鼠标滚轮通常以 120 为步长
12.     return e.sourceCapabilities?.firesTouchEvents || (e.constructor.name === 'WheelEvent' && e.wheelDeltaY % 120 !== 0)
13.   }  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    })  }}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。