600 块, 寻求一个技术问题支持, 一个虚拟滚动的问题

[qrobot]

在 firefox 浏览器中, 或者在 2k 显示屏中, 滚动会导致闪烁, 比较延迟.

只要修改了 transform 或者 absolute 的位置, 就会导致不同步

复现地址,

• https://ui.lif.ink/~demos/table-demo

在 firefox 浏览器中, 滚动表格即可触发此问题, 不知道是什么原因产生的. 但是在 chome 中就很正常. 在 firefox 中会发生很有意思的事情, 就是当你初步进入的时候,会发现滚动闪烁, 但是你按下 f12 审查此元素的时候, 此刻 firefox 就变的正常了.

为了方便大家调试

• https://github.com/Web-Lif/rc-table

这里是最小化代码仓库

执行以下命令即可调试代码

git clone https://github.com/Web-Lif/rc-table.git
npm install 
npm run start 

[yxcoder]

mac chrome ，在滚动的时候，人员名称一栏会出现明显的闪烁，直接拖动滚动条，效果特别明显。人员名称一栏的 DOM 明显和前面的不一样

[qrobot]

@yxcoder 是的， 因为固定列， 也就是 `人员名称` 这一列是通过 transform 来改变位置，达到固定列的效果， 但是我不知道为什么会进行闪烁， 但是如果是在 window chome 环境下就没有 这个问题。 最后经过我测试后知道

1. 在 chome 浏览器中，显示屏不是 2k 等高清显示屏， 或者 win10 中不开启缩放则不进行闪烁
2. firefox 中一定会出现。


我现在没有好的思路，但是很奇怪为什么会产生。mac chrome 估计是高清屏幕缩放导致的， 我有点困惑

[wzm5201314]

我这点开链接测试的时候发现，当使用鼠标滚轮进行滚动的时候，会出现滚动十几行之后卡住的情况了，后续在怎么滚动都卡在那不动了。

[wzm5201314]

对了，测试的时候使用的是微软的 Edge 浏览器与谷歌 chrome 浏览器，都出现这种情况了。

[qrobot]

@wzm5201314 什么环境？ 能加一下我 微信吗？在控制台输入 atob('d3hpZF85Z3Y0cGV2OGoxdTMyMQ==')

base64 d3hpZF85Z3Y0cGV2OGoxdTMyMQ==

[qrobot]

@wzm5201314 有闪烁，但是不应该会卡住才对。

[LiuJiang]

要不看下 Ant Design 如何实现的？ 传送门： https://github.com/react-component/table

[win97]

人员名称这一列的表头以及表格行在 dom 上是同级关系，我觉得是个不合理的设计。此外表头并不是始终都是第一个元素，导致需要通过定位来达到视觉上始终在首行的效果，但子元素的定位是依赖父元素的，需要等待父元素 transform 后，子元素才会重新定位，那我觉得问题可能就出现在这🤔

[wzm5201314]

@qrobot win10 系统，chrome 和 Edge 浏览器都是这样的了，用的都是最新版的了，微信加不了你了，提示找不到相关的账号或内容了

[qrobot]

@win97

```
人员名称这一列的表头以及表格行在 dom 上是同级关系
```

这个确实是无奈之举。 有好的想法吗？

其实不仅仅只是 Y 方向滚动会出现问题，X 方向滚动也会出现问题， 我把例子里面的列宽度拉开了， 可以在试试看看


有时间吗？ 可以帮我改改吗？ 代码在 `https://github.com/Web-Lif/rc-table.git` 中

[qrobot]

@win97 这么做最主要的问题是可以兼容 css 的动画， 因为表格行 是没有脱离文档流的。

[wzm5201314]

@qrobot win10 系统，chrome 和 Edge 浏览器都是这样的了，用的都是最新版的了。微信加不了你了，提示找不到相关的账号或内容了。我在我同事的电脑上试了一下，没有这种情况了。我不知道是不是我浏览器安装的插件引起的问题了

[qrobot]

@wzm5201314

微信号: wxid_9gv4pev8j1u321, 手机号: MTg4MjcwMDU2OTQ=

你在试试加一下我， 不好意思啊

[qrobot]

@win97 可以 fork 然后发一个 PR 给我， 如果不忙的话，

[wzm5201314]

@qrobot 兄弟，我试着加你了，微信号跟手机号都试着搜了，搜不到了，要不你试着加下我吧。微信号：bWVuaWFuX3hpbnpob25nZGUtdGE=

[jamosLi]

这个应该是 band.js 的问题吧，之前 elementUI 有这个诡异的抽搐问题。还有可能是 flex 弹性布局导致的。没有深入研究，遇到过。