鼠标滚轮功能在 svelte 上返回错误

Question

我想知道为什么这个代码

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

返回以下错误

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

这只是出于好奇，因为即使出现错误，它也能完美运行。

Ps。我正在使用 TypeScript

Answer 1

我相信您正在寻找的事件是 onwheel，这将在 Svelte 中转换为 on:wheel。

或者，如果您只对用于滚动目的的鼠标滚轮事件感兴趣，则正确的事件将是 onscroll（Svelte 中的 on:scroll）。

Answer 2

Svelte deprecated according to MDN and won't work in Firefox. Because it's non-standard, it is not included in the JSX typings 使用鼠标滚轮事件。

最好在单独的文件中使用标准 wheel event, which replaced mousewheel. If you really want to use the event, you can enhance the Svelte typings:

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

鼠标滚轮功能在 svelte 上返回错误

Mousewheel function returning error on svelte

typescript

svelte

svelte-component