md 가상 repeater가있는 md 하위 헤더가 올바르게 동작하지 않습니다.

Question

각도 1과 각진 재질을 사용하고 있습니다. mg-subheader를 ng-repeat 내의 배수 md-virtual-repeat-container와 함께 사용하고 싶습니다. 이 codepen에서 소스 코드를 찾을 수 있습니다.

지금 문제는 설명하기 까다로운 종류입니다. 먼저 높이가 전체 컨테이너보다 작도록 뷰포트의 크기를 조정해야합니다.

내가 한 섹션의 끝에 도달한다고 가정 해 보겠습니다. 2 섹션이 나타나야하며 스크롤하는 동안 화면 상단으로 이동하여 1 섹션 하위 헤더 (데모 here)를 대체하십시오. 이것은 1 섹션 컨테이너에서 스크롤하는 한 제대로 작동하지만 마우스가 2 섹션 컨테이너에 도달하면 마우스가 스크롤되어 섹션 컨테이너 1 개가 화면 상단에 계속 표시됩니다.

여기에 Video이 표시됩니다. 먼저 상위 컨텐츠를 스크롤 한 다음 하위 헤더를 스크롤하여 위로 이동 한 다음 두 번째 컨텐츠에서 스크롤하고 하위 헤더가 위로 이동하지 않습니다. 각도 데모 링크의 두 번째 내용을 스크롤 해보십시오.

나는 그 안에 또 다른 버그로 제공되는 codepen을 알고 있습니다. (내 소스에는 없지만, 무작위로 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와 완벽하게 작동합니다.

Answer 1

는 .md-virtual-repeat-offsetter에 n 값에 따라 스크롤 transform: translateY(n) !important;

추가 동적 CSS있다.

그래서 쉽게 솔루션을 추가하여이 동작을 중지하는 것입니다 :

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

확인 업데이트 CodePen.

희망이 도움이 :)