typescript - Función de rueda del ratón devuelve error en svelte

Me gustaría saber por qué este código

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

está devolviendo el siguiente error

El tipo '{ class: string; onmousewheel: (e: any) => void; }' no es asignable al tipo 'HTMLProps'. La propiedad 'onmousewheel' no existe en el tipo 'HTMLProps'.

Es solo por curiosidad porque funciona perfectamente incluso con el error.

PD. Estoy usando TypeScript

Respuesta #1

El evento mousewheel está obsoleto según MDN y no funcionará en Firefox. Debido a que no es estándar, no está incluido en los tipos JSX utilizados por Svelte.

Sería mejor usar el evento de rueda estándar, que reemplazó a mousewheel. Si realmente quieres usar el evento, puedes mejorar los tipos de Svelte en un archivo separado:

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

Respuesta #2

Creo que el evento que estás buscando es onwheel, que se traduciría como on:wheel en Svelte.

Alternativamente, si solo estás interesado en los eventos de la rueda del ratón con fines de desplazamiento, el evento correcto sería onscroll (on:scroll en Svelte).