Lenis verhindert das Scrollen in Textarea und Dropdown

Eine Textarea in einer meiner Figuren ließ sich nicht scrollen. Eine Tabelle mit overflow-y-auto daneben auch nicht. Hineinklicken ging, die Tastatur ging, die Scrollbar war da — das Mausrad tat schlicht nichts.

Ursache ist Smooth Scroll. Lenis fängt Wheel-Events für das gesamte Dokument ab, um die Seite selbst zu animieren. Alles Verschachtelte mit eigener Scrollbar bekommt sie nie zu sehen.

Der dokumentierte Fix

Lenis sucht nach einem data-lenis-prevent-Attribut und lässt diesen Teilbaum in Ruhe:

<textarea data-lenis-prevent />
<div className="max-h-72 overflow-y-auto" data-lenis-prevent>…</div>

Das funktioniert. Es muss aber auch bei jedem scrollbaren Element mitgedacht werden, das jemals dazukommt. Meine globals.css trug die passende Regel seit Monaten, und eine Suche ergab: kein einziges Element im Projekt benutzte das Attribut — auch nicht zwei Figuren, die ich in derselben Woche ausgeliefert hatte.

Der Fix, der nicht am Erinnern hängt

Lenis nimmt ein prevent-Prädikat. Statt Elemente zu markieren, fragst du den Knoten unter dem Cursor, ob er selbst scrollt:

function isOwnScroller(node) {
  if (node.hasAttribute?.('data-lenis-prevent')) return true;
  if (node instanceof HTMLTextAreaElement) return true;
  if (node instanceof HTMLSelectElement) return true;

  // Ein Style-Lookup lohnt nur bei Elementen, die tatsächlich überlaufen.
  if (node.scrollHeight <= node.clientHeight) return false;
  const overflowY = window.getComputedStyle(node).overflowY;
  return overflowY === 'auto' || overflowY === 'scroll';
}

const lenis = new Lenis({ prevent: isOwnScroller });

Die scrollHeight-Prüfung steht bewusst zuerst: Sie ist ein billiger Property-Zugriff und sorgt dafür, dass getComputedStyle nur bei tatsächlich überlaufenden Elementen läuft. Das Attribut gewinnt weiterhin dort, wo es Absicht dokumentiert.

Zwei Dinge, die man wissen sollte

• Horizontale Scroller sind meist unbetroffen. Mit orientation: 'vertical' fasst Lenis horizontale Wheel- und Trackpad-Events nicht an, ein scrollbares <pre> oder eine Tabelle funktionieren also weiter. Wer in beide Richtungen scrollt, prüft das besser, statt es anzunehmen.
• In der Entwicklung ist es unsichtbar, wenn Lenis auf Mobil ausgeschaltet ist. Meins ist unter 768px und bei prefers-reduced-motion deaktiviert — ein schmales Fenster oder die entsprechende Systemeinstellung verdeckt den Fehler vollständig.