React Virtualized List с AutoSizer - вертикальная полоса прокрутки не отображается

Я пытаюсь использовать React Virtualized List вместе с AutoSizer. Это моя проблема: я установил высоту списка на 200 пикселей, а затем я вижу в инспекторе Chrome, что высота равна 200, и это нормально, но переполненный контент виден, хотя я вижу, что стиль css ReatVirtualized_Grid_innerScrollContainer сидят до переполнения: скрытые. Проблема вызывает отсутствие вертикальной полосы прокрутки и отображение большой части данных, но не всех. Таким образом, он отображает намного больше данных, чем указанная высота, на которой я сидел. Это почему?

Это мой код:

import Row from './Row';
...
render () {
  return (
    <AutoSizer disableHeight>
     {({ width })} => (
       <List
          height = {200}
          width = {width}
          rowCount = {this.props.list.size}
          rowRenderer = {this.rowRenderer}
          rowHeight = {24}
        />
      )}
    </AutoSizer>
  );
}
rowRenderer = ({ key, style, index, parent }) => {
  const row = this.props.list.get(index);
  return (
    <Row
      row = {row}
      style = {style}
      rowIndex = {index}
      parent = {parent}
      columnIndex = {0}
    />
  );
}
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
2 912
2

Ответы 2

Проблема заключалась в том, что где-то в проекте были переопределены два переполнения:

  • ReactVirtualized__Grid__innerScrollContainer
  • и ReactVirtualized__Grid__innerScrollContainer внутри него

Таким образом, решение заключалось в том, чтобы охватить этот CSS, который переопределяет переполнение, чтобы указать только там, где это было необходимо, а не добавлять его глобально, чтобы это повлияло на все компоненты React Virtualized List.

Мне пришлось отключить свойство CSS will-change, чтобы отображалась полоса прокрутки с помощью виртуализированной реакции.

.ReactVirtualized__Grid.ReactVirtualized__List {
  will-change: unset !important;
}

Другие вопросы по теме