md仮想中継器を使用したmdサブヘッダーが正しく動作しない

Question

角度1と角度のある素材も使用しています。私は、ng-repeat内で複​​数のmd-virtual-repeat-containerを持つmd-subheaderを使用したいと思います。このcodepenにソースコードがあります。

問題は今説明するのが難しいです。まず、高さがフルコンテナより小さくなるようにビューポートのサイズを変更する必要があります。

私は1セクションの最後に達したとしましょう。 2セクションが表示され、スクロール中に画面上部に移動して1セクションのサブヘッダー（デモhere）を置き換えます。これは、1セクションのコンテナをスクロールしている間は正常に動作していますが、マウスが2セクションのコンテナに達するとすぐに、そのセクション内でスクロールし、1セクションのコンテナが画面の上部に表示されます。

ここにはVideoが表示されます。最初に上のコンテンツをスクロールし、次にサブヘッダをスクロールして上に移動し、次に2番目のコンテンツをスクロールして、サブヘッダが上に移動しないようにします。 （デモリンクの2番目のコンテンツをスクロールしてみてください）。

私はcodepenが別のバグとして提供されていることを認識しています（私のソースにはありませんが、無作為にスクロールしたようなものです）。スライダーを右に動かすと、ゆっくりとスクロールし、私の意図を理解することができます。これはではない私はこの問題で解決しようとしているバグです。

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と完全に機能します。 .md-virtual-repeat-offsetterにtransform: translateY(n) !important;

を追加する動的なCSSがあり

Answer 1

、n値はスクロールに依存します。

そう簡単に解決策を追加することによって、この動作を停止することです：

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

が更新CodePenを確認してください。

希望はこのことができます:)