V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
qrobot
V2EX  ›  问与答

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

  •  
  •   qrobot · 2022-06-01 01:02:29 +08:00 · 1432 次点击
    这是一个创建于 667 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    复现地址,

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

    为了方便大家调试

    这里是最小化代码仓库

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

    git clone https://github.com/Web-Lif/rc-table.git
    npm install 
    npm run start 
    
    第 1 条附言  ·  2022-06-02 14:00:04 +08:00
    结贴, 目前我自己已经找到为什么闪烁的原因了, 因为滚动事件的问题
    16 条回复    2022-06-08 11:40:17 +08:00
    yxcoder
        1
    yxcoder  
       2022-06-01 15:45:29 +08:00
    mac chrome ,在滚动的时候,人员名称一栏会出现明显的闪烁,直接拖动滚动条,效果特别明显。人员名称一栏的 DOM 明显和前面的不一样
    qrobot
        2
    qrobot  
    OP
       2022-06-01 15:58:56 +08:00
    @yxcoder 是的, 因为固定列, 也就是 `人员名称` 这一列是通过 transform 来改变位置,达到固定列的效果, 但是我不知道为什么会进行闪烁, 但是如果是在 window chome 环境下就没有 这个问题。 最后经过我测试后知道

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


    我现在没有好的思路,但是很奇怪为什么会产生。mac chrome 估计是高清屏幕缩放导致的, 我有点困惑
    wzm5201314
        3
    wzm5201314  
       2022-06-01 16:12:58 +08:00
    我这点开链接测试的时候发现,当使用鼠标滚轮进行滚动的时候,会出现滚动十几行之后卡住的情况了,后续在怎么滚动都卡在那不动了。
    wzm5201314
        4
    wzm5201314  
       2022-06-01 16:14:33 +08:00
    对了,测试的时候使用的是微软的 Edge 浏览器与谷歌 chrome 浏览器,都出现这种情况了。
    qrobot
        5
    qrobot  
    OP
       2022-06-01 16:19:28 +08:00
    @wzm5201314 什么环境? 能加一下我 微信吗?在控制台输入 atob('d3hpZF85Z3Y0cGV2OGoxdTMyMQ==')

    base64 d3hpZF85Z3Y0cGV2OGoxdTMyMQ==
    qrobot
        6
    qrobot  
    OP
       2022-06-01 16:20:25 +08:00
    @wzm5201314 有闪烁,但是不应该会卡住才对。
    LiuJiang
        7
    LiuJiang  
       2022-06-01 16:30:28 +08:00
    要不看下 Ant Design 如何实现的? 传送门: https://github.com/react-component/table
    win97
        8
    win97  
       2022-06-01 16:58:59 +08:00
    人员名称这一列的表头以及表格行在 dom 上是同级关系,我觉得是个不合理的设计。此外表头并不是始终都是第一个元素,导致需要通过定位来达到视觉上始终在首行的效果,但子元素的定位是依赖父元素的,需要等待父元素 transform 后,子元素才会重新定位,那我觉得问题可能就出现在这🤔
    wzm5201314
        9
    wzm5201314  
       2022-06-01 17:33:11 +08:00
    @qrobot win10 系统,chrome 和 Edge 浏览器都是这样的了,用的都是最新版的了,微信加不了你了,提示找不到相关的账号或内容了
    qrobot
        10
    qrobot  
    OP
       2022-06-01 17:35:43 +08:00
    @win97

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

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

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


    有时间吗? 可以帮我改改吗? 代码在 `https://github.com/Web-Lif/rc-table.git` 中
    qrobot
        11
    qrobot  
    OP
       2022-06-01 17:36:43 +08:00
    @win97 这么做最主要的问题是可以兼容 css 的动画, 因为表格行 是没有脱离文档流的。
    wzm5201314
        12
    wzm5201314  
       2022-06-01 17:40:00 +08:00
    @qrobot win10 系统,chrome 和 Edge 浏览器都是这样的了,用的都是最新版的了。微信加不了你了,提示找不到相关的账号或内容了。我在我同事的电脑上试了一下,没有这种情况了。我不知道是不是我浏览器安装的插件引起的问题了
    qrobot
        13
    qrobot  
    OP
       2022-06-01 17:40:42 +08:00
    @wzm5201314

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

    你在试试加一下我, 不好意思啊
    qrobot
        14
    qrobot  
    OP
       2022-06-01 17:43:06 +08:00
    @win97 可以 fork 然后发一个 PR 给我, 如果不忙的话,
    wzm5201314
        15
    wzm5201314  
       2022-06-01 17:47:01 +08:00
    @qrobot 兄弟,我试着加你了,微信号跟手机号都试着搜了,搜不到了,要不你试着加下我吧。微信号:bWVuaWFuX3hpbnpob25nZGUtdGE=
    jamosLi
        16
    jamosLi  
       2022-06-08 11:40:17 +08:00
    这个应该是 band.js 的问题吧,之前 elementUI 有这个诡异的抽搐问题。还有可能是 flex 弹性布局导致的。没有深入研究,遇到过。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2884 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:06 · PVG 21:06 · LAX 06:06 · JFK 09:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.