react-data-grid中冻结的列在水平滚动时出现抖动

Question

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

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

只需在移动视图中加载网格并尝试水平滚动即可。

任何以前遇到过这个问题的人，请给出一些解决方案

Answer 1

在我的例子中，将-webkit-overflow-scrolling设置为auto没有任何帮助。同样在this帖子中，sontek表示，设置rowHeight将修复在我的情况下也不起作用的ises。

最后，我不得不从我的自定义TableRow组件中删除border-bottom来解决这个问题。即使是玩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;
+}

对于任何在这里登陆的人来说，这基本上就是问题的样子：

用户界面：

​

​

DOM：

​

Answer 2

我也观察到了同样的行为。将以下内容添加到数据网格容器会有所帮助：

-webkit-overflow-scrolling: auto;