Touch.pageY — Eigenschaft · JavaScript-Referenz

Signatur

Touch.pageY

Beschreibung

Touch.pageY liefert die vertikale Position eines Berührungspunkts in CSS-Pixeln. Gemessen wird ab dem oberen Rand des gesamten Dokuments. Hat der Nutzer die Seite gescrollt, ist der Bildlaufversatz also schon eingerechnet. Im Kern gilt: pageY === clientY + window.scrollY.

Die Eigenschaft passt immer dann, wenn eine Position unabhängig vom aktuellen Bildlauf gebraucht wird. Das gilt etwa für absolut positionierte Elemente im Dokument (Tooltips, Markierungen, Ziehgriffe) oder für Wischgesten, bei denen auch gescrollt wird. Brauchst du dagegen Koordinaten relativ zum sichtbaren Fensterausschnitt, z. B. für position: fixed oder document.elementFromPoint(), nimm besser Touch.clientY.

An Touch-Objekte kommst du über die Listen touches, targetTouches und changedTouches eines TouchEvent. Bei touchend ist touches für den abgehobenen Finger schon leer. Die letzte Position steht dann nur noch in changedTouches.

Rückgabewert

Typ

number

Beschreibung

Y-Koordinate in CSS-Pixeln relativ zum Dokumentanfang, inklusive Bildlaufversatz. Der Wert kann Nachkommastellen haben (double).

Beispiele

Position eines Berührungspunkts ausgeben

document.addEventListener('touchstart', (event) => {
  const touch = event.touches[0];
  console.log(`pageY: ${touch.pageY}, clientY: ${touch.clientY}, scrollY: ${window.scrollY}`);
}, { passive: true });

pageY: 1250, clientY: 250, scrollY: 1000

Marker an der Berührungsstelle im Dokument platzieren

const marker = document.createElement('div');
Object.assign(marker.style, {
  position: 'absolute',
  width: '20px',
  height: '20px',
  borderRadius: '50%',
  background: 'crimson',
  pointerEvents: 'none'
});
document.body.append(marker);

document.addEventListener('touchmove', (event) => {
  const { pageX, pageY } = event.touches[0];
  // absolute Positionierung bezieht sich auf das Dokument → pageX/pageY passen
  marker.style.left = `${pageX - 10}px`;
  marker.style.top = `${pageY - 10}px`;
}, { passive: true });

Vertikale Wischgeste erkennen

let startY = 0;

document.addEventListener('touchstart', (event) => {
  startY = event.changedTouches[0].pageY;
}, { passive: true });

document.addEventListener('touchend', (event) => {
  // bei touchend steht die letzte Position nur in changedTouches
  const deltaY = event.changedTouches[0].pageY - startY;
  if (Math.abs(deltaY) > 50) {
    console.log(deltaY < 0 ? 'Wisch nach oben' : 'Wisch nach unten');
  }
});

Wisch nach oben

Position relativ zu einem Element berechnen

const canvas = document.querySelector('#zeichenflaeche');

canvas.addEventListener('touchstart', (event) => {
  event.preventDefault(); // Scrollen während des Zeichnens unterbinden
  const touch = event.targetTouches[0];
  const rect = canvas.getBoundingClientRect();
  // rect ist viewport-relativ → Bildlaufversatz addieren
  const y = touch.pageY - (rect.top + window.scrollY);
  console.log(`Y im Canvas: ${Math.round(y)}px`);
}, { passive: false });

Y im Canvas: 84px

// Wichtig · Fallstricke

Nicht mit clientY verwechseln: Gegenüber clientY ist pageY um window.scrollY verschoben. getBoundingClientRect() und elementFromPoint() rechnen viewport-relativ, dafür brauchst du clientY.
Bei touchend/touchcancel enthält event.touches den abgehobenen Finger nicht mehr. Lies die Position daher aus event.changedTouches, sonst gibt es einen TypeError.
Pinch-Zoom: Die Werte sind CSS-Pixel des Layout-Viewports. Hat der Nutzer hineingezoomt, weichen sie von den physischen Bildschirmpixeln ab (siehe visualViewport).
Passive Listener: Chrome und Safari behandeln touchstart/touchmove auf document standardmäßig als passiv. preventDefault() funktioniert dort nur mit { passive: false }.
Kompatibilität: Touch Events werden von allen mobilen Browsern und von Chromium auf Touch-Geräten unterstützt. Desktop-Firefox und Desktop-Safari (macOS) lösen ohne Touchscreen keine Touch Events aus. Für Maus, Stift und Touch gemeinsam sind Pointer Events (PointerEvent.pageY) die robustere Wahl.

Siehe auch

Touch.pageX Touch.clientY Touch.screenY Touch Touch.target