IT评测·应用市场-qidao123.com

标题: overflow-x: auto 使用鼠标实现横向滚动，区分触摸板和鼠标滚动变乱的方法 [打印本页]

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

区分触摸板和鼠标滚轮

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

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 的横向滚动的方法如下：

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 }) }}

复制代码

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

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)