Материал Угловые свитки сверху при открытии коврика и шкуры

Question

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

Ожидаемое поведение, которого я хочу достичь: когда я открываю поле селектора, которое ограничено селектором, оно должно прокручиваться до верхней части области просмотра, а параметры должны отображаться под ним.

Демо : https://stackblitz.com/edit/angular-g6s73z

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

Выпуск : https://streamable.com/r3ekd

Я не могу найти способ это исправить. Я попытался реализовать свою собственную стратегию прокрутки, в которой я использовал scrollIntoView, а затем вручную переставил панель выбора, когда она переполняла содержимое. Это было глючит на Android и iOS, поэтому я отказался от этой идеи.

У кого-нибудь была подобная проблема? Как решить эту проблему? Может быть, я что-то пропустил?

Пользовательская стратегия прокрутки

enable() {
  setTimeout(() => {
  document.querySelector('#field').scrollIntoView({behavior: 'smooth'});
  this.scrollDispatcher.scrolled().subscribe(() => {
    this.overlayRef.updatePosition();
  });

  this.scrollDispatcher.scrolled().pipe(debounceTime(50), take(1)).subscribe(() => {
    if (parseFloat(this.overlayRef.hostElement.style.top) <= 0) {
      this.overlayRef.overlayElement.style.top = coerceCssPixelValue(12);
    }
  });
  this.overlayRef.updatePosition();

  disablePageScroll();
}

Answer 1

Приятное наблюдение.

После расследования выяснилось, что

• mat-select было взято в верхнюю часть представления ... и размещение mat-select было правильным во всех случаях (когда mat-select находилось в середине представления и когда mat-select было в самом нижняя часть вида)
• проблема была с div, который открывается, когда мы нажимаем mat-select, на нем есть класс cdk-overlay-10; В этом div есть встроенное значение css bottom, встроенное в него [в этом проблема, и именно это значение bottom выводит div из экрана]
• решение таково: установите top:0 в этом div, и наша проблема будет решена ... только одно предостережение о том, что когда мы нажимаем mat-select 2 происходит: (1) прокрутка страницы ( 2) параметры div становятся видимыми ... так что улучшенное решение будет иметь пользовательскую анимацию, которая отображает div медленно, так что прокрутка заканчивается до того, как div становится видимым.

релевантно CSS :

::ng-deep .cdk-overlay-pane{top:0 !important; 
opacity: 1; animation:slowReveal 2s ease-in;
}
@keyframes slowReveal{
  from{opacity:0.5;}
  to{opacity:1;}
}

завершено разветвленный рабочий стек может быть здесь