antd 左右滑动_使用垂直鼠标滚轮在React组件上水平滚动

I have a component that resizes into a horizontal row of bootstrap cards when in a smaller desktop window. For users without a horizontal mouse wheel and not using a touchpad, I would like to allow users to scroll horizontally using their vertical mouse wheel movements when hovering over this particular component.

Here is the original StackOverflow issue I based my code off of:

https://stackoverflow.com/a/15343916/8387497

Horizontal Scroll helper component:

function horizontalScroll (event) {

const delta = Math.max(-1, Math.min(1, (event.nativeEvent.wheelDelta || -event.nativeEvent.detail)))

event.currentTarget.scrollLeft -= (delta * 10)

event.preventDefault

}

How I've implemented it on component requiring horizontal scrolling:

When I've placed this horizontalScroll helper function within the R