2016-07-07 2 views
4

md-virtual-repeat에서 목록을 아래로 스크롤하면 스크롤 속도와 표시 속도가 일치하지 않습니다. 항목이 스크롤 속도를 따라갈만큼 빠르게 표시되지 않습니다. 또한 '목록을 지나치게 스크롤하여'공백이 맨 아래에 표시됩니다 (반면 스크롤이 중지되어야 함).각도 재질 - 목록의 md-virtual-repeat - 스크롤/로딩/디스플레이 문제

은 codepen 참조 : 문제가에 최소 높이를 변경하여 악화되는

md-list-item, md-list-item ._md-list-item-inner { 
    min-height: 32px; 
} 

멀리 "MD-목록 항목, MD-목록 항목은 목록 항목-내부 ._md"http://codepen.io/sweatherly/pen/PzKRLz가 기본이다에서 값. codepen에서 min-height가 변경되지 않은 경우 문제가 존재하지 않습니다 (로컬 시스템에서 Chrome을 실행하면 악화되지만 끔찍하지는 않습니다. 그러나 특정 화면 크기에서는 더 문제가됩니다).

나는 CSS로 놀고 몇 시간 동안 인터넷을 검색했지만 문제가 해결되지 않았다. 어떤 아이디어?

답변

2

얼마전 비슷한 문제가 발생하여 md-item-size 속성이 md-virtual-repeat으로 나타났습니다. docs

그 설명은 다음과 같다 :

(각 요소 동일 함) 반복 ​​요소의 높이 또는 너비. 선택 과목. 누락 된 경우 dom에서 크기를 읽으려고 시도하지만 반복되는 모든 노드의 높이 또는 너비는 동일하다고 가정합니다.

나는 당신의 예에이를 추가 한이

<md-list-item md-virtual-repeat="test in testings" class="repeated-item" flex="" md-item-size="48"> 
(48)가 md-list-item의 높이입니다

, 그리고

md-list-item, md-list-item ._md-list-item-inner { 
    min-height: 32px; 
} 

CodePen

스크롤링이 부드러운 것으로 보인다

제거 하단에는 공백이 없습니다. md-virtual-repeat-container 내에서 스크롤이 제대로

.md-virtual-repeat-container.md-orient-vertical { 
    height: calc(100% - 100px); 
} 
+0

당신을 감사 작동하도록

나는이 CSS를 변경! 지금 아름답게 작동합니다. – sweatherly

+0

100px는 어디에서 제공됩니까? .md-virtual-repeat-container.md-orient-vertical { 높이 : calc (100 % - 100px); } – sweatherly

+0

@sweatherly 솔직히 말해서, 그것은 효과가있는 가치였습니다. 나는 당신의 CodePen에서 스크롤바가 사라 졌다는 것을 알아 차렸고 그 컨테이너의 바닥 부분이 목록을 지나가고 있음을 보았습니다. –

관련 문제