【问题标题】: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>

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

【讨论】:

    猜你喜欢
    • 2021-11-27
    • 1970-01-01
    • 2012-07-07
    • 1970-01-01
    • 1970-01-01
    • 2017-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多