在鼠标滚轮上设置React组件为水平滚动

Question

我有一个react组件，它在页面上水平显示一个图像列表。

我希望能够水平滚动，而不必按住SHIFT键。

是否有一种方法，我改变默认的只有这个组件使用css或反应?

下面是我的代码:https://codesandbox.io/s/team-grid-slicer-2db8d

Answer 1

您可以创建ref并将其绑定到您将滚动的div。这是一个工作代码盒

就是创建一个ref然后赋值给div

const scrollRef = useRef()
...
<div ref={scrollRef}>

您可以在div:

中收听wheel事件的变化

if(scrollRef.current){
scrollRef.addEventListener('wheel', /* your function */)
}

滚动到左边，而不是根据wheel事件的deltaY:

el.scrollTo({
left: el.scrollLeft + e.deltaY * 5,
behavior: "smooth"
});

PS:你可以删除* 5，但它看起来更好我

Answer 2

只需添加一个id="container到您的组件，然后添加

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

这将监听onWheel并滚动你的组件。