ג'אווהסקריפט - באג בגלילה אינסופית ברכיב מציג הקס של Svelte

עבדתי על יצירת רכיב מציג הקסדצימלי שיכול להתמודד עם הצגת מערכים גדולים באופן שרירותי. צפוי להתמודד עם עשרות מיליוני ערכים. הצלחתי לגרום לרכיב הזה לפעול ברובו, אבל יש באג חמקמק שנתקעתי איתו כבר כמה ימים.

הרעיון הוא להציג ב-DOM רק את מה שנראה כרגע על המסך. יש אלמנטים של רווח מעל ומתחת לחלון התצוגה שמדמים את ההזזה של התאים שלא מוצגים.

הרכיב הרלוונטי ניתן למצוא כאן: https://github.com/DamenH/hex-viewer/blob/master/src/lib/SmartDataGrid.svelte

פונקציה זו מחשבת את האינדקסים ההתחלתיים והסופיים של המערך הנראים כיום בחלון התצוגה, ואז משנה את visibleCells כך שיכיל את טווח הערכים הזה.

    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);
    }

פונקציה זו מחשבת את גודל המרווחים מעל ומתחת לתאים המוצגים.

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

הנושא.

כאשר גוללים למטה, בין אם דרך ידית הגלילה, גלגלת העכבר האמצעית, או גרירת כפתור העכבר האמצעי, הגלילה מתחילה להסתובב אוטומטית מבלי להפסיק.

אני חושב מה שקורה הוא שנוצר לולאה שבה המרווח העליון מחושב בצורה לא נכונה, מה שמפעיל אירוע גלילה, שממשך לנצח. מה שמכעיס אותי באמת זה שזה קורה רק כאשר גוללים למטה. גלילה למעלה חלקה, וכפי שציפינו. ניסיון לשנות את המרווח העליון כדי להתגבר על זה גורם להתנהגות הזו להתקיים גם בגלילה למעלה.

זוהי הדגמה של הרכיב.

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

אשמח מאוד לכל עזרה עם זה.

עדכון

לאחר מספר בדיקות נוספות גיליתי שזה נראה שקורה רק ב-Chrome. הגשתי דוח על תקלה ב-Chrome. אנסה ליצור מחדש את הרכיב הזה עם Vue. אם הבעיה תימשך, זה יהיה מאוד מעניין.