Теряет стиль после горизонтальной прокрутки

#reactjs #react-table #react-window

#reactjs #react-таблица #реагировать-окно

Вопрос:

Я комбинирую react-window-scroller, react-window, and react-table — у меня возникают проблемы при прокрутке по горизонтали. Похоже, что он теряет стиль в каждой строке. Попробуйте прокрутить немного вниз, а затем прокрутить по горизонтали — все содержимое исчезает, теперь попробуйте прокрутить по вертикали, и оно снова появится?

URL для выдачи: https://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

Я не уверен, что вызывает эту проблему. Если я удалю свойство styling в списке, in работает, но затем я теряю функциональность прокрутки до окна…

введите описание изображения здесь

Комментарии:

1. Я не вижу никаких проблем со стилем по ссылке. Похоже, что при отображении оставшегося списка во время прокрутки возникает задержка.

2. Попробуйте прокрутить список вниз (далеко вниз), а затем попробуйте прокрутить по горизонтали, после чего содержимое исчезнет

3. Попробуйте сделать экран маленьким и попробуйте… Затем вы можете воссоздать его заново… Это происходит, как только некоторые столбцы не видны, и вам нужно прокручивать их по горизонтали, чтобы увидеть их… Может быть, какие-то вычисления идут не так?

4. Я обновил экран / видеоряд проблемы

Ответ №1:

Потенциальным, но ДЕЙСТВИТЕЛЬНО уродливым решением является запуск события прокрутки при прокрутке:

 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>
 

Я не думаю, что это хорошее решение, но на данный момент я не вижу другого способа решить эту проблему. Я надеюсь, что у кого-то есть лучшее решение этой проблемы? 🙂