冻结列在反应数据网格中的水平滚动上抖动

时间:2017-09-13 17:51:12

标签: javascript reactjs react-data-grid

我正在使用react-data-grid。当我在移动设备中加载网格时,冻结列在水平滚动上闪烁。 这是重现错误的链接。

http://adazzle.github.io/react-data-grid/examples.html#/fixed-cols

只需在移动视图中加载网格,然后尝试水平滚动。

之前遇到此问题的任何人,请提出一些解决方案

2 个答案:

答案 0 :(得分:0)

我观察到同样的行为。将以下内容添加到数据网格容器中有助于:

-webkit-overflow-scrolling: auto;

答案 1 :(得分:0)

在我的情况下,将-webkit-overflow-scrolling设置为auto并没有帮助。同样在this中的帖子sontek中说,设置rowHeight将解决问题,在我的情况下也不起作用。

最后,我不得不从自定义border-bottom组件中删除TableRow来解决此问题。甚至与box-sizing玩耍也不成功。

我做了什么:

<div className={styles.tableRow}>
    {this.props.children}
+    <div className={styles.tableRowBorder} aria-hidden={true} />
 </div>
 .tableRow
 {
     // ...
-    border-bottom: 1px solid $colorGrayLighter3;
+    position:   relative;
 }
+
+.tableRowBorder
+{
+    height:         1px;
+    position:       absolute;
+    pointer-events: none;
+    width:          100%;
+    bottom:         0;
+    left:           0;
+    background:     $colorGrayLighter3;
+}

对于任何登陆这里的人来说,基本上就是这个问题:

UI:

ui flickering

DOM: dom flickering