Vanilla Javascript Swipe – Wischen und Ziehen

Swipe mit Touch-Geste und Scrollrad der Maus

Ein Swipe von Rechts nach Links oder Links nach Rechts holt den Screen einer zuvor oder danach besuchten Seite auf den Screen, in Apps wie iTunes scrollt ein Fingerwisch durch die aktuellen Charts, Ein swipe-Event gibt es nicht, sondern Swipe wird durch touchstart und touchend entdeckt, wenn der Finger über eine Distanz hinweg nicht angehoben wird. Auch wenn immer häufiger pointer-Events eingesetzt werden, um Gesten sowohl auf dem Touchscreen als auch mit Maus oder Stift auszuwerten, sind hier touch-Events angebracht, denn das Wischen mit der Maus wird durch das Mausrad umgesetzt - mit wheel-Events.

Für ein einfaches Swipe von rechts nach links oder von links nach rechts braucht Javascript nur wenige Zeilen. Hinter "Swipe" steckt ein einfaches Pointer-Event sowie das Auslesen, auf welchen Koordinaten der Finger die Touchfläche verläßt. Mit der Maus auf dem Desktop-Rechner wird Swipe als Bewegung mit dem Scrollrad umgesetzt.

<div class="result"></div>
<div class="swipeDetector lock-screen"></div>

1️⃣ Auf dem Touchscreen entscheiden zwei Events durch ihre jeweiligen Positionen, in welche Richtung der Swipe führt: touchstart und touchend.

const el = document.querySelector(".swipeDetector");
const result = document.querySelector(".result");

// Einstellungen
const BASE_THRESHOLD = 50;
const FAST_THRESHOLD = 20;
const FLICK_TIME = 200; // ms

// ==========================
// 1️⃣ TOUCH (Finger)
// ==========================

let touchStartX = 0;
let touchStartTime = 0;

el.addEventListener("touchstart", (evt) => {
	const t = evt.touches[0];
	touchStartX = t.clientX;
	touchStartTime = Date.now();
}, { passive: true });

el.addEventListener("touchend", (evt) => {
	const t = evt.changedTouches[0];
	const diff = t.clientX - touchStartX;
	const duration = Date.now() - touchStartTime;

	handleSwipe(diff, duration);
});

2️⃣ Das Scrollrad entscheidet über die Richtung des Wischens oder Swipe: wheel-Event.

// ==========================
// 2️⃣ WHEEL (Maus / Trackpad)
// ==========================

let wheelAccum = 0;
let wheelStartTime = 0;
let wheelTimeout;

let lastTrigger = 0;
const COOLDOWN = 200; // ms zwischen Swipes

el.addEventListener("wheel", (evt) => {
	evt.preventDefault();

	const now = Date.now();
	if (now - lastTrigger < COOLDOWN) return;

	const delta = evt.deltaX || evt.deltaY;

	// 👉 sofort reagieren bei ausreichend starkem Impuls
	if (Math.abs(delta) > 15) {
		handleSwipe(delta, 50); // kurze Dauer = schneller Swipe
		lastTrigger = now;
	}
}, { passive: false });

3️⃣Sowohl touch-Events als auch wheel liefern die Differenz in der horizontalen Richtung des Swipes.

// 3️⃣ zentrale Swipe-Auswertung
function handleSwipe(diff, duration = 300) {
	const threshold = duration < FLICK_TIME ? FAST_THRESHOLD : BASE_THRESHOLD;

	if (Math.abs(diff) < threshold) return;

	if (diff < 0) {
		result.textContent = "Swipe nach Links";
		el.style.backgroundColor = "cornflowerblue";
	} else {
		result.textContent = "Swipe nach Rechts";
		el.style.backgroundColor = "salmon";
	}
}

Swipe mit scroll-snap und etwas Javascript

Dank CSS Scroll-Snap entsteht die sauberste Lösung: Echtes Swipe-Verhalten ohne Drag-Simulation, weil der Browser das Scrollen übernimmt. Javascript reagiert nur für die Anzeigen-Buttons. Das Ergebnis ist ein weiches Swipe, das sowohl auf dem Touchscreen als auch auf dem Monitor funktioniert (Drag, Scrollrad, Trackpad).