Блог

После нескольких часов исследований я все еще не могу решить эту странную проблему.

У меня в моем проекте Angular есть простая сетка Ag (версия 10.2, Ag Grid версии 24.1), ничего особенного, просто для отображения не редактируемых данных (примечание: rowData не является асинхронным, потому что я вручную устанавливаю данные):

 <div>
  <ag-grid-angular
    #agGrid
    id="grid"
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [gridOptions]="gridOptions"
  ></ag-grid-angular>
</div>
  

Параметры сетки:

     this.gridOptions = {
        defaultColDef: {
          sortable: true,
          resizable: true,
          editable: true,
          suppressMenu: true,
          filter: true,
          floatingFilter: true,
          filterParams: { buttons: ['clear'] }
        },
        headerHeight: 60,
        animateRows: true,
        pagination: false,
        paginationAutoPageSize: false,
    }
  

Если я использую ее в новом проекте, полосы прокрутки отображаются отлично, никаких проблем.

Но если я использую ее в своем текущем проекте, полосы вообще не отображаются, не имеет значения, если я принудительно использую инструкции из документов (переопределите переполнение .ag-body-viewport для прокрутки !важно. Значение !important необходимо для переопределения встроенного стиля.) или с такими настройками, как alwaysShowVerticalScroll: true.

В моем проекте я использую Bootstrap, и у меня классическая структура (заголовок, левая строка меню, содержимое). Я предполагаю, что какой-то стиль нарушает систему прокрутки сетки Ag, но я не могу найти, что происходит.

Может кто-нибудь подсказать мне, что я могу проверить, чтобы решить эту проблему? Я искал любое «переполнение» в моем styles.css, но безуспешно.

Хорошо, итак, разработчик CSS покажет мне правильный путь.

Я поделюсь этими знаниями здесь для будущих ссылок, потому что для разработчика, не связанного с CSS (например, для меня), не очевидно, где это найти.

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

 ::-webkit-scrollbar {
    width: 0;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
  

Я искал только стили «переполнения», так как это было ключевым, когда я гуглил об этой проблеме. И это псевдокласс, поэтому он отображается внизу стиля Chrome Dev tools.

После удаления этого прокрутки работают так, как ожидалось.