Svelte贴纸键盘子元素滚动无法触发父元素滚动问题排查

我在开发聊天应用的贴纸选择键盘，父元素设置为overflow-x: scroll，单个贴纸容器设置为overflow-y: scroll。使用Svelte重写后，仅能通过拖动滚动条滑块实现滚动，此前原生JS版本可正常运行，且两者CSS与JS完全一致，求排查方向。

Svelte HTML代码 #

<div class="stickerKeyboardContainer" transition:fly|global={{y: 40, duration: 100}} use:stickersHandler>
    <div class="stickerKeyboard">
        <div class="headers">
            <button on:click={() => { moveHeads('left'); }} class="navBtn hoverShadow"><i class="fa-solid fa-chevron-left" /></button>
            <div class="stickersHeader" id="stickersHeader" bind:this={stickersHeader}>
                {#each Stickers as sticker}
                    <img loading="lazy" class="hoverShadow" data-group="{sticker.name}" class:selected={$selectedSticker == sticker.name} src="/stickers/{sticker.name}/animated/{sticker.icon}.webp" alt="{sticker.name}">
                {/each}
            </div>
            <button on:click={() => { moveHeads('right'); }} class="navBtn hoverShadow"><i class="fa-solid fa-chevron-right" /></button>
        </div>
        <div on:scroll={() => {console.log("scrolling")}} class="stickersBody" id="stickersBody" use:stickersBodyHandler>
            {#each Stickers as sticker}
                <div class="stickerBoard {sticker.name}" id="{sticker.name}">
                    {#each Array.from({ length: +sticker.count }) as _, i}
                        <img loading="eager" class="stickerItem" data-serial={i+1} src="/stickers/{sticker.name}/static/{i + 1}-mini.webp" alt="{sticker.name}">
                    {/each}
                </div>
            {/each}
        </div>
    </div>
</div>

相关截图说明 #

• 截图1：展示贴纸键盘的整体布局结构
• 截图2：显示贴纸头部横向滚动区域的细节
• 截图3：呈现贴纸主体纵向滚动区域的状态

• 检查自定义指令的事件拦截：查看stickersHandler和stickersBodyHandler这两个自定义指令中，是否意外调用了event.preventDefault()或event.stopPropagation()，阻止了滚动的默认行为。
• 验证DOM元素绑定与初始化时机：确认bind:this={stickersHeader}正确获取到DOM元素，且滚动相关的初始化逻辑是在Svelte的onMount钩子中执行的，避免元素未渲染完成就操作DOM。
• 排查过渡动画的影响：临时移除transition:fly|global过渡效果，测试滚动是否恢复正常——部分全局过渡可能会添加pointer-events: none之类的属性，干扰交互。
• 检查CSS的pointer-events属性：确认滚动容器及其子元素没有被设置pointer-events: none，该属性会导致鼠标/触摸事件无法触发滚动。
• 测试事件兼容性：在桌面端和移动端分别测试，排查是否是Svelte对触摸滚动事件的处理逻辑与原生JS存在差异，必要时手动添加触摸滚动的事件监听。
• 对比原生与Svelte的DOM结构：在浏览器开发者工具中对比原生JS版本和Svelte版本的最终DOM结构，看是否有Svelte额外添加的嵌套元素或属性影响了滚动容器的尺寸或事件传递。

内容的提问来源于stack exchange，提问作者Castler Steve