虚拟列表嵌套滚动条，滚动条失效

[LyazS]

描述错误

我在虚拟列表里边嵌套很多个滚动条，鼠标放在滚动条上想要通过滑轮滚动滚动条，结果滚动的确实虚拟列表。只能通过左键点击来拉动滚动条。

复现步骤

<template>
    <n-virtual-list style="max-height: 500px" :items="lines" :item-size="10">
        <template #default="{ item }">
            <n-scrollbar x-scrollable>
                <n-h5>
                    <n-tag>{{ item.name }}</n-tag>
                </n-h5>
            </n-scrollbar>
        </template>
    </n-virtual-list>
</template>

<script setup>

import { NVirtualList, NH5, NH2, NTag, NScrollbar, } from 'naive-ui';


const lines = [];
for (let i = 0; i < 4000; i++) {
    let line = `text${i}`;
    for (let j = 0; j < 200; j++) {
        line += ` long`;
    }
    lines.push({ id: i, name: line });
}
</script>

<style scoped></style>

最小复现链接

链接

系统信息

System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
    Memory: 7.84 GB / 23.96 GB
  Binaries:
    Node: 20.6.0 - D:\Program Files\nodejs\node.EXE
    npm: 10.8.0 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    naive-ui: ^2.38.2 => 2.38.2
    vue: ^3.4.21 => 3.4.21

使用的包管理器

npm

验证

• 阅读 贡献指南。
• 阅读 文档。
• 检查是否已经存在相同问题的问题，以避免创建重复的问题。
• 确保这是一个具体的 bug。有关问题和答案，请打开 GitHub 讨论。
• 提供的复现是最小可复现的示例。