RecycleView Scroll-Problem in Firefox

  • JavaScript

    RecycleView Scroll-Problem in Firefox

    Guten Tag,
    ich bin gerade dabei einen RecycleView zu basteln.
    Kurz erklärt ich habe ein Array mit z.B. 100 HTMLElementen beim laden der Seite werden die ersten 8 Elemente in einem DIV angezeigt. Wenn der Benutzer nun nach unten scrollt und beim letzten Element angekommen ist wird das 1. Element aus dem DIV entfernt und am Ende wird ein neues Element hinzugefügt. Der DIV enthält also immer 8 Elemente wobei das erste und letzte Element von einem IntersectionObserver überwacht werden.

    Wenn ich in Firefox zum 20+ Element scrolle und anschließend wieder nach oben scrolle springt Firefox ungewollt zum 1. Element. Das Problem tritt nur in Firefox auf wenn man zu schnell nach oben scrollt.

    Meine RecycleView Methode

    Quellcode

    1. #recycleViews(entries)
    2. {
    3. let hasIntersection = false;
    4. for(let i = 0; i < entries.length; ++i)
    5. {
    6. if (!entries[i].isIntersecting)
    7. continue;
    9. hasIntersection = true;
    10. const entry = entries[i];
    11. this.#intersectionObserver.unobserve(entry.target);
    12. if (entry.target === this.#observedTargets.firstTarget)
    13. {
    14. let index = this.#childElements.findIndex(x => x === this.#parentElement.firstElementChild);
    15. if (index < 1)
    16. continue;
    18. this.#parentElement.lastElementChild.remove();
    19. this.#parentElement.insertBefore(this.#childElements[--index], this.#parentElement.firstElementChild);
    20. this.#observedTargets.firstTarget = null;
    21. }
    22. else if (entry.target === this.#observedTargets.lastTarget)
    23. {
    24. let index = this.#childElements.findIndex(x => x === this.#parentElement.lastElementChild);
    25. if (index < 0 || index >= this.#childElements.length - 1)
    26. continue;
    28. this.#parentElement.firstElementChild.remove();
    29. this.#parentElement.appendChild(this.#childElements[++index]);
    30. this.#observedTargets.lastTarget = null;
    31. }
    32. }
    34. if (hasIntersection)
    35. this.#startObservation(this.#parentElement.firstElementChild, this.#parentElement.lastElementChild);
    36. }



    Hat jemand eine Ahnung woran das liegen könnte oder noch besser eine Lösung für das Problem?
    Ich hab das Projekt auch mal angehängt. Um das Verhalten zu reproduzieren einfach bis zum 20+ Element scrollen und dann 3x schnell mit dem Mausrad noch oben scrollen.


    *Edit*
    Bei genauerem betrachten des Problems fällt auf das FireFox die neu hinzugefügten Elemente in den Viewport scrollt. Als workaround stelle ich nun sicher das nach dem hinzufügen eines neuen Elements das 2. Element in den Viewport gescrollt wird. Das behebt das Problem.

    Quellcode

    1. if (this.#isFireFox)
    2. this.#parentElement.firstElementChild.nextElementSibling.scrollIntoView();
    Dateien

    • RecycleView.rar

      (1,96 kB, 37 mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „Fakiz“ ()

Facebook
Telefonspende