Question

在我的应用程序中，我使用的是材料选择组件。

我想要实现的预期行为是：当我打开绑定到选择器的选择器字段时，应滚动到视口顶部，并且选项应显示在其下方。

演示：https://stackblitz.com/edit/angular-g6s73z

我发现一个问题，当选择器靠近视口底部时，选项将最终显示在屏幕之外。

我找不到解决方法。我尝试在使用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位于视图的中间并且{ {1}}位于视图的最底部）
问题出在div，当我们单击mat-select时打开div，上面有mat-select类；在这个div上，有一个内联分配给它的css cdk-overlay-10值[这是问题所在，而这个bottom值将div推离了屏幕]
解决方案是：在此div上设置一个bottom，我们的问题将得到解决...只有一个警告，当我们单击top:0时会发生两种情况：（ 1）页面滚动（2）选项div变得可见...因此，改进的解决方案将是使用自定义动画缓慢显示div，以便在div变得可见之前完成滚动。 / li>

材质角在滚动选择垫并隐藏时滚动到顶部

1 个答案: