0

I'm combining react-window-scroller, react-window, and react-table - I'm experiencing issues when scrolling horizontally. It seems like it loses the styling on each row. Try scrolling a bit down, and then scroll horizontally - All content disappears, now try scrolling vertically and it shows again?

URL to issue: https://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

I'm not sure what's causing this problem. If I remove the styling property on the list, in works, but then I lose the scrolling to window functionality...

enter image description here

Improve this question
4
  • I'm not seeing any styling issues from the link. It looks like there is a delay when rendering the remaining list during scrolling.
    – Shamar Yarde
    Commented Nov 23, 2020 at 13:36
  • Try scrolling down in the list (far down) - And then try scrolling horizontally, then the content disappears
    – envy
    Commented Nov 23, 2020 at 13:42
  • Try making the screen small, and try... Then you can recreate it... It's as soon as some of the columns isn't visible, and you have to scroll horizontally to see them... Maybe some calculations going wrong?
    – envy
    Commented Nov 23, 2020 at 21:47
  • I've updated with screen/video sequence of the problem
    – envy
    Commented Nov 24, 2020 at 10:14

1 Answer 1

Reset to default
0

A potential, but REALLY ugly solution is to trigger a scroll event 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>

I dont think this is a good solution, but for now, I cant see any other way of solving this. Im hoping someone out there has a better solution for this problem? :)

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.