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>
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.
The version of hd3adcode is perfect. Here the typescript version :
export function useHorizontalScroll<T extends HTMLElement>() {
const elRef = useRef<T>(null);
useEffect(() => {
const el = elRef.current;
if (el) {
const onWheel = (e: WheelEvent) => {
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;
}
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
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>
