水平滚动后失去样式答案

【问题标题】：Loses styling after horizontal scroll水平滚动后失去样式
【发布时间】：2021-03-06 05:12:37
【问题描述】：

我正在合并react-window-scroller, react-window, and react-table - 我在水平滚动时遇到问题。似乎它失去了每一行的样式。尝试向下滚动一点，然后水平滚动 - 所有内容都消失了，现在尝试垂直滚动并再次显示？

发布网址： https://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

我不确定是什么导致了这个问题。如果我删除列表中的样式属性，可以正常工作，但是我会失去滚动到窗口的功能......

【问题讨论】：

我没有从链接中看到任何样式问题。在滚动期间呈现剩余列表时似乎存在延迟。
尝试在列表中向下滚动（远向下） - 然后尝试水平滚动，然后内容消失
试着把屏幕变小，然后尝试……然后你可以重新创建它……当某些列不可见时，你必须水平滚动才能看到它们。 .. 也许有些计算出错了？
我已经更新了问题的屏幕/视频序列

标签： reactjs react-table react-window

【解决方案1】：

一个潜在但非常丑陋的解决方案是触发 onScroll 的滚动事件：

const triggerScroll = () => {
  window.dispatchEvent(new CustomEvent('scroll'));
};

<VariableSizeList
                ref={ref}
                outerRef={outerRef}
                height={window.innerHeight}
                style={{...style, overflow: 'hidden'}}
                itemCount={data.length + 1}
                itemSize={() => 29}
                onScroll={triggerScroll}
                itemData={rows}
              >
                {renderRow}
              </VariableSizeList>

我认为这不是一个好的解决方案，但目前我看不到任何其他解决方案。我希望有人有更好的解决方案来解决这个问题？ :)

【讨论】：