javascript / expert
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
1
2
3
4
5
6
7
8
9
10
11
12
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
1
const master = React.useRef(null);
Erstellt eine Referenz auf das primäre scrollbare DOM-Element.
2
slave.current.scrollTop = master.current.scrollTop;
Manipuliert direkt die DOM-Eigenschaft des zweiten Elements, um sie an das erste anzupassen.