How to do React-horizontal scroll using mouse wheel - reactjs

Question

I have used tailwind-CSS on react js I want to scroll horizontally using mouse wheel when user hover over the card section so for pc users can scroll horizontally by using mouse wheel instead of both shift and mouse wheel.
Live Anywhere
<div className="flex space-x-3 overflow-y-scroll scrollbar-hide p-3 -ml-3">
{cardsDate?.map(({ img, title }) => (
<MediumCard key={img} img={img} title={title} />
))}
</div>
</section>

Answer 1

You can use a custom scroll function as a ref to your div.
export function useHorizontalScroll() {
const elRef = useRef();
useEffect(() => {
const el = elRef.current;
if (el) {
const onWheel = e => {
if (e.deltaY == 0) return;
e.preventDefault();
el.scrollTo({
left: el.scrollLeft + e.deltaY,
behavior: "smooth"
});
};
el.addEventListener("wheel", onWheel);
return () => el.removeEventListener("wheel", onWheel);
}
}, []);
return elRef;
}
The above function can be imported and used as follows:
<div className="App" ref={scrollRef} style={{ overflow: "auto" }}>
<div style={{ whiteSpace: "nowrap" }}>
<Picture />
</div>
</div>
I created a codesandbox as an example.

Answer 2

try with scrollBy working well
const element = document.querySelector("#container");
element.addEventListener('wheel', (event) => {
event.preventDefault();
element.scrollBy({
left: event.deltaY < 0 ? -30 : 30,
});
});
container with his children elements

Answer 3

You can do this inline without the use of refs or hooks with the following code:
<div
style={{ scrollbarColor="transparent", overflowX="auto" }}
onWheel={(e) => {
// here im handling the horizontal scroll inline, without the use of hooks
const strength = Math.abs(e.deltaY);
if (e.deltaY === 0) return;
const el = e.currentTarget;
if (
!(el.scrollLeft === 0 && e.deltaY < 0) &&
!(
el.scrollWidth -
el.clientWidth -
Math.round(el.scrollLeft) ===
0 && e.deltaY > 0
)
) {
e.preventDefault();
}
el.scrollTo({
left: el.scrollLeft + e.deltaY,
// large scrolls with smooth animation behavior will lag, so switch to auto
behavior: strength > 70 ? "auto" : "smooth",
});
}}
>
// ...
</div>