Passive Event Listeners

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
} 

import "./NewsElements.scss";
import { NewsElement } from "./NewsElement";

export const NewsElements = () => {
    let container: HTMLDivElement;

    const handleWheel = (event: WheelEvent) => {
        event.preventDefault();
        container.scrollLeft += event.deltaY;
    }

    return <div ref={container!} class="chaos-news-elements" onWheel={handleWheel}>
        <div class="chaos-news-elements--scroll-wrapper">
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
            <NewsElement title="Lorem ipsum" description="Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet" />
        </div>
    </div>
}