Mousewheel function returning error on svelte

Question

i'd like to know why this code

<div class="home" on:mousewheel="{e=>handleScroll(e)}"></div>

is returning the following error

Type '{ class: string; onmousewheel: (e: any) => void; }' is not assignable to type 'HTMLProps'. Property 'onmousewheel' does not exist on type 'HTMLProps'.

It is just for curiosity because it works perfectly even with the error.

Ps. I'm using TypeScript

Answer 1

The mousewheel event is deprecated according to MDN and won't work in Firefox. Because it's non-standard, it is not included in the JSX typings used by Svelte.

It would be better to use the standard wheel event, which replaced mousewheel. If you really want to use the event, you can enhance the Svelte typings in a separate file:

// additional-svelte-jsx.d.ts
declare namespace svelte.JSX {
    interface HTMLAttributes<T> {
        onmousewheel?: (event: any) => any;
    }
}