Imperative Scroll-Synchronisation mit Refs

Snippet

Imperative Scroll-Synchronisation mit Refs

Beim Erstellen komplexer Benutzeroberflächen wie Side-by-Side-Code-Editoren muss man oft die Scroll-Position zweier Elemente imperativ über Refs synchronisieren, um den Overhead eines zustandsgesteuerten Renderings bei jedem Pixel zu vermeiden.

snippet.js
javascript
const useScrollSync = () => {
  const master = React.useRef(null);
  const slave = React.useRef(null);
 
  const handleScroll = (e) => {
    if (e.target === master.current) {
      slave.current.scrollTop = master.current.scrollTop;
    }
  };
 
  return { master, slave, handleScroll };
};

react

Erklärung

const master = React.useRef(null);

Erstellt eine Referenz auf das primäre scrollbare DOM-Element.

slave.current.scrollTop = master.current.scrollTop;

Manipuliert direkt die DOM-Eigenschaft des zweiten Elements, um sie an das erste anzupassen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek