Fixed column not working properly via mouse wheel or touchpad but drag scroll bar working as expected in Chrome/Safari

[shuozhang2016]

Chrome version(latest): 83.0.4103.61

Safari version 11.1.2 (13605.3.8)
Safari screenshot as below:

btw, Firefox works well

[shuozhang2016]

@NexxLuo 请问有什么好的解决办法吗？还是很喜欢本插件提供的强大功能，但是
经测试，在5台电脑上的Chrome，有4台里面的症状是触摸板或鼠标滚轮下滚时数据闪烁+行撕裂
Safari上 全部为行撕裂没，导致插件不可用，请大神帮忙修正一下问题, 只有firefox上用是正常的

[NexxLuo]

检查下node_module中react-base-datagrid的版本

[shuozhang2016]

我的这个截图是在您的官网上用不同的浏览器截图的效果

下载了之后发现react-base-datagrid 版本是1.9.4并且上述症状依然存在

@NexxLuo

[NexxLuo]

用的是哪个官网地址？正确的地址是https://tablex.now.sh/packages/website.
老地址已经没有更新了

[shuozhang2016]

我上面的截图显示的就是这个最新的地址，我下载的也是最新的依赖

[shuozhang2016]

我指的情况是存在至少一个 固定列 fixed: 'left'的情况

[NexxLuo]

是否清除了缓存？上图两个例子中并没有设置 fixed 属性

[shuozhang2016]

例子中确实没有固定列 ，但我们的需求是需要有固定列的，所以我在例子中增加了fixed属性。无论在官网，还是下载下来的最新demo中都是一样的表现，行撕裂
(感谢您耐心的回复)

[NexxLuo]

我这里的确是没有复现，我的也是google 83.0.4103.61

[shuozhang2016]

我们有5个电脑的google浏览器只有一个是正确显示的，您可以换一台电脑的google浏览器试一下吗。并且safari上的症状5台全部都是行撕裂的
google: 行闪烁+行撕裂
safari: 行撕裂

[NexxLuo]

你是mac上的google？

[shuozhang2016]

是的，5台电脑全部是mac上的google, safari, firefox
且google版本全部为: 版本 83.0.4103.61（正式版本） （64 位）
但只有一个是显示正常的

[NexxLuo]

把完整的table dom结构导出来

[shuozhang2016]

刚刚测试了windows上的google浏览器确实是正常的，但是IE11却打不开，IE11控制台有报错。请问这个产品是不支持IE的吗？

[NexxLuo]

示例网站没进行兼容处理

[shuozhang2016]

请问，如何进行IE11兼容呢？
下载到本地用polyfill 在IE11也是报错的

[NexxLuo]

什么错误？ 具体兼容处理得在项目上进行配置，内部也仅仅是使用了 async之类的东西

[shuozhang2016]

把完整的table dom结构导出来

请问您要的是column的这个数组吗？ 还是整个html检查元素

[NexxLuo]

html

[shuozhang2016]

这个是报语法错的地方。

请问是如何做polyfill的呢？ 需要安装什么插件吗？

[NexxLuo]

尝试下关闭google的硬件加速

[shuozhang2016]

尝试下关闭google的硬件加速

已经关闭了。症状依然存在。

请问IE的问题有什么可以指导一下吗？现在IE11都报错启动不起来

[NexxLuo]

上面的IE错误信息，看起来代码都没转成es5。自行百度吧，或者直接参考一些脚手架的配置

[shuozhang2016]

请问，那现在mac上google和safari的问题有什么解决思路吗？ @NexxLuo

[condorheroblog]

上面的IE错误信息，看起来代码都没转成es5。自行百度吧，或者直接参考一些脚手架的配置

@NexxLuo

我是用最新的 create-react-app 搭建的脚手架，同时使用 react-app-polyfill 兼容了 IE11，我固定了左边两列，做无限滚动时，固定列和不固定列撕裂，请问怎么解决这个问题。

下图是演示效果：

[NexxLuo]

@condorheroblog ie浏览器？ 拷贝官网示例代码是否也有此问题？

[condorheroblog]

@NexxLuo
因为你的官网在 IE11 打不开，我只能在本地起一个项目并配置兼容 IE11 。然后用你官网的代码复制下来，加上固定列，在本地运行列撕裂，但是不加固定列效果很好。

[NexxLuo]

@condorheroblog 能否提供一个codesandbox?

[condorheroblog]

@NexxLuo
tablex 在 codesandbox 能安装上，但是 import 的时候就会报错，其他包都没问题，没办法只能给你看文件了。

我的主要代码是：

import React from 'react';
import Table  from 'tablex';

class Demo extends React.Component {
	generateData(columns, count = 20, prefix = 'Row') {
		return new Array(count).fill(0).map((row, rowIndex) => {
			return columns.reduce(
				(rowData, column, columnIndex) => {
					rowData[column.dataIndex] =
						prefix + ' ' + rowIndex + ' - Col ' + columnIndex
					return rowData
				},
				{
					id: prefix + rowIndex,
					parentId: null,
				},
			)
		})
	}
	constructor(props) {
		super(props)
		const columns = [
			{
				dataIndex: 'column-1',
				key: 'column-1',
				title: 'number',
				width: 100,
				fixed: 'left'
			},
			{
				dataIndex: 'id',
				title: 'nick-1',
				key: 'column-21',
				maxWidth: 300,
				width: 150,
				align: 'center',
				fixed: 'left',
				render: (value, row, index) => {
					const obj = {
						children: value,
						props: {},
					}
					if (index === 6) {
						obj.props.rowSpan = 15
						obj.children = (
							<div
								style={{
									width: 12,
									wordBreak: 'break-all',
									whiteSpace: 'pre-line',
									margin: 'auto',
								}}
							>
								行数据合并
							</div>
						)
					}

					if (index === 1) {
						obj.props.colSpan = 2
						obj.children = <div>列数据合并</div>
					}

					return obj
				},
			},
			{
				dataIndex: 'column-31',
				key: 'column-31',
				title: 'nick-2',
				width: 150,
				align: 'center',
			},

			{
				dataIndex: 'age',
				key: 'column-4',
				title: 'age',
				align: 'right',
			},
		]

		let data = this.generateData(columns, 2000)

		this.state = {
			data: data,
			columns: columns,
		}
	}
	render() {
		let { columns, data } = this.state
		return (
			<Table
				rowKey="id"
				columns={columns}
				overscanCount={15}
				virtual={true}
				data={data}
				selectMode="multiple"
				orderNumber={true}
			/>
		)
	}
}

export default Demo;

[NexxLuo]

示例网站已经可以在ie中运行。 滚动问题在ie中显示很不友好，目前并没有特别好的处理方式。