javascript - Uendelig rulling-feil i Svelte heksavisningskomponent

Jeg har jobbet med å lage en heksadesimalvisningskomponent som kan håndtere visningen av vilkårlig store matriser. Det forventes opptil titalls millioner verdier. Jeg har klart å få denne komponenten stort sett til å fungere, men det har vært en unnvikende feil som jeg har vært fast med i flere dager.

Ideen er å kun gjengi til DOM det som for øyeblikket er synlig på skjermen. Det finnes spacer-elementer over og under visningsområdet som etterligner forflytningen av cellene som ikke blir gjengitt.

Den relevante komponenten kan finnes her: https://github.com/DamenH/hex-viewer/blob/master/src/lib/SmartDataGrid.svelte

Denne funksjonen beregner start- og sluttindeksene til arrayet som for øyeblikket er synlige i viewporten, og endrer deretter visibleCells for å inneholde det området av verdier.

    function updateVisibleCells() {
      let visibleAreaStart = dataGrid.scrollTop;
      let visibleAreaEnd = dataGrid.scrollTop + height;
      let startIndex = Math.floor(visibleAreaStart / cellHeight) * columns;
      let endIndex = Math.ceil(visibleAreaEnd / cellHeight) * columns;
      endIndex = Math.min(items.length, endIndex);
    
      [currentStartIndex, currentEndIndex] = [startIndex, endIndex];
      visibleCells = items.slice(startIndex, endIndex);
    }

Denne funksjonen beregner størrelsen på avstandsstykkene over og under de gjengitte cellene.

    function updateSizes() {
      topSpacerHeight = Math.floor(currentStartIndex / columns) * cellHeight;
      bottomSpacerHeight = 
        Math.floor((items.length - currentEndIndex) / columns) * cellHeight;
    }

Problemet.

Når man blar nedover, enten via rullehåndtaket, midt- eller rullehjulet på musen, eller ved å dra midt- eller museknappen, begynner rullingen å gå i loop automatisk uten å stoppe.

Jeg tror det som skjer er at det opprettes en loop der den øverste spacer beregnes feil, noe som utløser en scroll-hendelse, som fortsetter i det uendelige. Det som virkelig overrasker meg er at dette bare skjer når man skroller ned. Å skrolle opp er glatt, og som forventet. Forsøk på å endre den øverste spaceren for å motvirke dette resulterer i at oppførselen også skjer ved skrolling opp.

Her er en demo av komponenten.

https://damenh.github.io/hex-viewer/

Jeg vil virkelig sette pris på all hjelp med dette.

Oppdater

Etter noen flere tester har jeg oppdaget at dette ser ut til å bare skje i Chrome. Jeg har sendt inn en feilrapport til Chrome. Jeg vil prøve å gjenskape denne komponenten med Vue. Hvis problemet vedvarer, ville det være veldig interessant.