虚拟列表嵌套滚动条,滚动条失效
LyazS opened this issue · comments
AirzoStorm commented
描述错误
我在虚拟列表里边嵌套很多个滚动条,鼠标放在滚动条上想要通过滑轮滚动滚动条,结果滚动的确实虚拟列表。只能通过左键点击来拉动滚动条。
复现步骤
<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