Signatur
Beschreibung
Die schreibgeschützte Eigenschaft screenY eines Touch-Objekts gibt die vertikale Position eines Berührungspunkts relativ zum Bildschirm (nicht zum Viewport oder Dokument) zurück. Wie weit die Seite gescrollt ist, spielt dafür keine Rolle, und auch die Lage des Browserfensters auf dem Bildschirm ändert nichts an der Bezugsgröße: Maßgeblich ist immer die Oberkante des Bildschirms.
Man nutzt screenY vor allem, wenn Positionen über Fenstergrenzen hinweg verglichen werden sollen, etwa bei Gesten, die nahe am Bildschirmrand beginnen, oder wenn man Touch-Positionen mit window.screenY/window.screenTop ins Verhältnis setzt. Für die meisten Aufgaben innerhalb einer Seite eignen sich clientY (relativ zum Viewport) oder pageY (relativ zum Dokument, mit Scrollversatz) besser.
Zugriff hat man über die Listen touches, targetTouches und changedTouches eines TouchEvent. Bei touchend ist die beendete Berührung nur noch in changedTouches enthalten.
Beispiele
Bildschirmkoordinate beim Berühren ausgeben
const area = document.querySelector('#touch-area');
area.addEventListener('touchstart', (event) => {
// Erster neu hinzugekommener Berührungspunkt
const touch = event.changedTouches[0];
console.log(`screenY: ${touch.screenY}, clientY: ${touch.clientY}, pageY: ${touch.pageY}`);
}, { passive: true });Vertikale Wischgeste über screenY erkennen
let startY = null;
document.addEventListener('touchstart', (event) => {
startY = event.changedTouches[0].screenY;
}, { passive: true });
document.addEventListener('touchend', (event) => {
if (startY === null) return;
const deltaY = event.changedTouches[0].screenY - startY;
if (Math.abs(deltaY) > 80) {
console.log(deltaY < 0 ? 'Wisch nach oben' : 'Wisch nach unten');
}
startY = null;
}, { passive: true });Alle aktiven Finger auflisten
const logTouches = (event) => {
const positions = Array.from(event.touches, (t) => ({
id: t.identifier,
screenY: Math.round(t.screenY)
}));
console.table(positions);
};
document.addEventListener('touchmove', logTouches, { passive: true });// Wichtig · Fallstricke
- Kein Scrollversatz:
screenYhängt nicht von der Scrollposition ab. Wer Elemente im Dokument positionieren will, solltepageYoderclientYnehmen. - Mobile Browser: Da Browser auf Mobilgeräten meist im Vollbild laufen, unterscheiden sich
screenYundclientYoft nur um die Höhe der Browserleiste. Mit Zoom (Pinch-Zoom) und beim Ein- oder Ausblenden der Adressleiste kann dieser Abstand schwanken. - Datenschutz: Einige Browser (z. B. Firefox mit
privacy.resistFingerprinting) runden Bildschirmkoordinaten oder verfälschen sie, damit sich Nutzer nicht per Fingerprinting wiedererkennen lassen. - touchend: Die beendete Berührung steht nur in
changedTouches,event.touchesist dann womöglich leer. - Kompatibilität: Touch-Events gibt es nur auf Geräten mit Touch-Unterstützung. Auf Desktop-Browsern ohne Touchscreen ist
window.TouchEventoft nicht definiert. Wer Maus, Stift und Finger gemeinsam behandeln will, nimmt besserPointerEvent.screenY.