Mousewheel function returning error on svelte

user_15276179 0
Viewed 477

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

svelte-component svelte typescript
2 Answers

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;
    }
}
user_148089880

I believe the event you are looking for is onwheel which would translate to on:wheel in Svelte.

Alternatively, if you're only interested in the mouse wheel events for scrolling purposes, the correct event would be onscroll (on:scroll in Svelte).

user_54386160
Related