search

tusen-ai / naive-ui

A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
https://www.naiveui.com
MIT License
16.24k stars 1.68k forks source link

n-tree 官网示例大数据量虚拟滚动时卡住不滚动 #3048

Closed liupan1890 closed 2 years ago

liupan1890 commented 2 years ago

TuSimple/naive-ui version (版本)

2.29.1

Vue version (Vue 版本)

3.2.36

Browser and its version (浏览器及其版本)

edge

System and its version (系统及其版本)

傻

Node version (Node 版本)

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/os-theme/components/tree

Reappearance steps (重现步骤)

1.移动鼠标到tree上 2.滚动鼠标滚轮，0.5秒滚一下，一直滚 3.看到tree滚动了一次，然后停止不动，不再滚动 4.移动鼠标（滚动鼠标滚轮没有停，一直滚），看到tree再次滚动，然后停住

Expected results (期望的结果)

滚动鼠标滚轮，0.5秒滚一下，一直滚 预期tree一直向下滚动

Actual results (实际的结果)

滚动鼠标滚轮，0.5秒滚一下，一直滚 触发滚动一次后停止不动

Remarks (补充说明)

1.移动鼠标到tree上 2.滚动鼠标滚轮，0.5秒滚一下，一直滚 3.看到tree滚动了一次，然后停止不动，不再滚动

方案一：停止滚动，等待约1-2秒后，再次滚动鼠标滚轮，tree也会滚动一次 方案二：一直滚动时，移动鼠标位置，tree也会滚动一次

总之，tree的滚动事件似乎只触发一次，然后就不触发了。而不是正确的响应多次滚动事件

1.可能是因为item滚动到视界之外，无法接收到滚动事件了？ 2.可能是tree自己搞了滚动事件防抖了？ scroll

07akioni commented 2 years ago

确实没遇到这个问题，系统和鼠标都是什么？

07akioni commented 2 years ago

是 windows？

liupan1890 commented 2 years ago

是window10, edge 版本 102.0.1245.30 (正式版本) (64 位) 同一个浏览器，我测试antdvue的tree虚拟化时（官方示例），可以正常的一直往下滚动，就是naive会出现滚动后卡住不动

这个不是性能问题，也不是功能问题，感觉上就是事件触发的问题

--

同一个电脑+EDGE antdv是正常的 https://www.antdv.com/components/tree scrollantd

liupan1890 commented 2 years ago

测试win7+Chrome 复现BUG Chrome 已是最新版本 版本 102.0.5005.63（正式版本） （64 位）

--

同一台电脑 win7+360急速浏览器13.0 内核86.0.4240.198 正常滚动没有BUG

07akioni commented 2 years ago

测试win7+Chrome 复现BUG Chrome 已是最新版本 版本 102.0.5005.63（正式版本） （64 位）

--

同一台电脑 win7+360急速浏览器13.0 内核86.0.4240.198 正常滚动没有BUG

我先看看是不是 chrome 102 的问题

07akioni commented 2 years ago

我试了试 chrome 102 在我的电脑上确实没啥问题，是个 mac，这下有点难搞了

Sepush commented 2 years ago

win10 chrome 102 没复现 https://user-images.githubusercontent.com/39197136/173168215-6380cfcb-b6f1-442d-a3a0-1bb0e0ca6900.mp4

07akioni commented 2 years ago

用的什么鼠标能讲一下吗？

a42195472 commented 2 years ago

chrome 102 的问题, windows版本虚拟滚动的都有问题了,看起其他使用虚拟滚动的包,类似handsontable, ag-grid, 阿里的@surely-vue/table,都出现同样的问题,mac下没问题, 列表滚动到刚好要替换数据时, document.addEventListener('scroll'),相关的其他监听滚动的事件就不会触发了,鼠标滚动停下来再继续滚,滚动监听事件又会正常触发了,老版本chrome的监听是没问题的

a42195472 commented 2 years ago

image image

Ant Design Vue里面是把外层的overflow-y设置为hidden禁用滚动之后,监听的该元素的鼠标滚轮事件再进行模拟滚动,所以Ant Design Vue里面是正常的,这算是一个解决方案哦

07akioni commented 2 years ago

image image

Ant Design Vue里面是把外层的overflow-y设置为hidden禁用滚动之后,监听的该元素的鼠标滚轮事件再进行模拟滚动,所以Ant Design Vue里面是正常的,这算是一个解决方案哦

鼠标滚轮这个是能说是个之前不太想采用的方案，因为和移动端分叉，会想办法暂时处理一下