时间戳

首页 > 解决方案 > 使用垂直鼠标滚轮在 React 组件上水平滚动

javascript - 使用垂直鼠标滚轮在 React 组件上水平滚动

问题描述

在较小的桌面窗口中，我有一个组件可以调整为水平的引导卡行。对于没有水平鼠标滚轮且不使用触摸板的用户，我希望允许用户在悬停在此特定组件上时使用垂直鼠标滚轮移动水平滚动。

这是我基于代码的原始 StackOverflow 问题： https ://stackoverflow.com/a/15343916/8387497

水平滚动辅助组件：

function horizontalScroll (event) {
  const delta = Math.max(-1, Math.min(1, (event.nativeEvent.wheelDelta || -event.nativeEvent.detail)))
  event.currentTarget.scrollLeft -= (delta * 10)
  event.preventDefault
}

我如何在需要水平滚动的组件上实现它：

<Row className='announcements-home' onWheel={horizontalScroll} >

当我将这个horizontalScroll辅助函数放在 React onWheel 事件中时，它会水平和垂直滚动。我想要的结果只是水平滚动。此外，Firefox 似乎根本没有响应这些更改的水平滚动。

标签： javascriptreactjsscrollhorizontal-scrollingmousewheel

解决方案

onWheel = (e) => {
    e.preventDefault()
    var container = document.getElementById('container')
    var containerScrollPosition = document.getElementById('container').scrollLeft
    container.scrollTo({
        top: 0,
        left: largeContainerScrollPosition + e.deltaY
        behaviour: 'smooth' //if you want smooth scrolling
    })
}

推荐阅读