html - 带有 md 虚拟中继器的 md 子标题行为不正常

Question

我也在使用 Angular 1 和 Angular Material 。我想在 ng-repeat 中使用 md-subheader 和多个 md-virtual-repeat-container。您可以在这个 codepen 上找到源代码.

现在的问题有点难以解释。首先，您必须调整视口(viewport)的大小，使高度小于完整的容器。

假设我到达了 1 个部分的末尾。 2 部分应该出现，在滚动时，转到屏幕顶部并替换 1 部分子标题(演示 here)。只要您在 1 节容器上滚动，它就可以正常工作，但是一旦您的鼠标到达 2 节容器，它就会在其中滚动并且 1 节容器仍然出现在屏幕顶部。

这是一个Video给你看。首先，我在顶部内容上滚动，然后在副标题上滚动，它向上移动，然后我在第二个内容上滚动，副标题没有向上移动，这是应该的。 (尝试滚动 Angular 演示链接中的第二个内容)。

我知道 codepen 是其中的另一个错误(我的资源中没有它，但它随机出现在 codepen 上..)，它看起来有点像无限滚动，但你可以使用 slider 在右边慢慢滚动你就会明白我的意思了。这不是我试图用这个问题解决的错误。

html 非常简单，因为它只是一个模拟模式来重现我在我的应用程序中遇到的错误。

<section ng-repeat="title in vm.dataset">
  <md-subheader>{{$index + 1}} Section</md-subheader>
  <md-virtual-repeat-container>
    <p md-virtual-repeat="item in vm.dataset" md-on-demand="{{vm.onDemand}}">{{item.value}}</p>
  </md-virtual-repeat-container>
</section>

我认为这个问题与您必须为虚拟中继器容器指定高度才能工作这一事实有关。此实现可以与普通的 ng-repeat 完美配合。

Answer 1

有一个动态CSS添加transform: translateY(n) !important;

到.md-virtual-repeat-offsetter，n值取决于滚动。

很容易解决的办法是通过添加来阻止这种行为:

.md-virtual-repeat-container .md-virtual-repeat-offsetter {
   -webkit-transform: translateY(0) !important;
   transform: translateY(0) !important;
}

检查更新的 CodePen .

希望这有帮助:)