최신 Blink 포함 브라우저 (예 : Chrome, Opera)에서 이상한 스크롤 동작

최신 Blink 포함 브라우저 (예 : Chrome, Opera)에서 이상한 스크롤 동작

---

최근에 저는 Angular 용 트리 뷰 컴포넌트 라이브러리를 ngx-tree 로 구축하는 작업을했습니다 .

문제

대용량 데이터 세트의 성능을 위해이 라이브러리에 가상 스크롤 기능 을 구현하는 방법을 알아 내고 Firefox에서 제대로 실행되도록 하자마자 Blink가 포함 된 브라우저 (Chromium, Chrome 등) 에서 이상한 스크롤 동작에 갇혔습니다. , 오페라).

데모 링크

다음은 데모 플 런커입니다. https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 아래 업데이트 # 1 참조

상태

• Firefox, Edge 및 IE 11에서 가상 스크롤 기능이있는 내 라이브러리는 부드러운 스크롤로 예상대로 작동합니다.
• 그러나 Chrome과 Opera에서 트 리뷰 내부의 일부 위치로 스크롤하면 스크롤바의 위치 ( scrollTop스크롤 영역 의 속성)가 위아래로 점프 하여 트 리뷰 가 깜빡 거리고 가상 화면이 깨집니다. 스크롤 기능.

브라우저 상세 버전

• 크롬-59.0.3071.115
• Firefox-54.0
• 가장자리-40.15063.0.0

다른 브라우저

중국에는 Chromium 프로젝트에서 파생 된 일부 셸 브라우저 (예 : 360se, QQ 브라우저, Sogou 브라우저, UC 브라우저)가 있으며 이전 버전의 V8 및 blink가 있습니다. 그리고 이상한 스크롤 동작이 없습니다.

일부 가정

Chromium 팀의 스크롤 구현 최적화 (예 : 부드러운 스크롤)로 인해 발생합니까?

가이드를 얻을 수 있기를 바랍니다 !!! (≧ ﹏ ≦)

---

업데이트 # 1

이벤트 로그로 데모 링크 업데이트 : https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

로그를 보려면 devtool을 열기 전에 스크롤을 테스트해야합니다.

가상 스크롤이 작동하는 방식과 깜박임의 원인에 대해 좀 더 설명해야합니다.

먼저 가상 스크롤 의 디자인을 참조하십시오 .

가상 스크롤의 요점은 가상 스크롤을 계측하지 않고 해당 영역과 동일한 크기의 가짜 스크롤 영역을 만드는 것입니다. 따라서 최적의 상황에서 스크롤 영역의 스크롤바 위치는 예상되는 일부 이벤트가 변경을 트리거 할 때까지 변경되지 않아야합니다. 스크롤 이벤트의 경우 모든 애니메이션 프레임에 대한 뷰를 업데이트합니다.

높이가 고정 된 스크롤 영역 내에서 애니메이션 내에서 렌더링되지 않은 요소의 높이를 올바르게 시뮬레이션 하면 scrollTop 속성이 큰 비율로 변경되지 않는다고 가정합니다 ( 계산 정확도에 약간의 편차 가있을 수 있음 ). 틀.

그러나 내가 관찰 한 결과에 따르면, 깜박이는 시리즈 브라우저는 스크롤 가능한 요소의 scrollTop을 업데이트하기 위해 다른 전략을 수행하는 것 같습니다. scrollTop을 업데이트하는 타이밍은 깜박이지 않는 시리즈 브라우저와 다릅니다. 내가 지금까지 알아 낸 모든 것.

---

샘플 gif

여기에서는 Chrome, Firefox 및 Edge의 출력을 보여주는 몇 가지 gif를 만들었습니다.

크롬

Firefox

가장자리

---

virtual-scroll-demo-branch지점 에서 라이브러리를 가져옵니다 .

'ngx-tree': 'https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib',

그 브랜치는 마스터 뒤에 105 개의 커밋입니다. margin-top내부 요소 중 하나에 잘못 설정 됩니다. 이 문제는 최신 버전에서 수정되었습니다 .

편집 : 개발자는 실제로 커밋 메시지 에서이 스택 오버플로 질문을 참조했습니다 .

참조 URL : https://stackoverflow.com/questions/44995749/weird-scroll-behavior-in-latest-blink-included-browsers-like-chrome-opera