Javascript ile scroll yönünü tespit etme - scroll direction

Web sitelerinde scroll (kaydırma) yönünü belirlemek, kullanıcı etkileşimleriyle alakalı birçok kullanım senaryosunda yararlıdır. Örneğin, bir kullanıcı sayfayı yukarı kaydırdığında bir başlık menüsünü göstermek, aşağı kaydırdığında ise bu menüyü gizlemek istiyorsanız scroll yönünü tespit etmeniz gerekebilir.

Aşağıda, scroll yönünü nasıl tespit edeceğinizi adım adım açıklayan bir örnek bulunmaktadır.

1. Scroll Olayını Dinleyin

window nesnesi üzerinde scroll olayını dinleyerek kullanıcının sayfayı kaydırdığını algılayabilirsiniz. Bu olay tetiklendiğinde, kullanıcının sayfada yatay veya dikey kaydırma yapıp yapmadığını kontrol etmek için scrollY veya scrollX değerlerini kullanacağız.

2. Scroll Yönünü Belirleyin

Scroll yönünü tespit etmek için önceki scroll pozisyonunu bir değişkende saklamamız ve yeni pozisyonla karşılaştırmamız gerekir. Kullanıcı aşağı kaydırdığında scrollY değeri artacak, yukarı kaydırdığında ise azalacaktır.

Basit Örnek

// Bir önceki scroll pozisyonunu tutmak için değişken
let previousScrollY = window.scrollY;

// Scroll yönünü tespit eden fonksiyon
function detectScrollDirection() {
    const currentScrollY = window.scrollY;
    if (currentScrollY > previousScrollY) {
        console.log("Aşağı kaydırılıyor");
    } else if (currentScrollY < previousScrollY) {
        console.log("Yukarı kaydırılıyor");
    }
    // Bir sonraki scroll olayında karşılaştırmak için yeni pozisyonu kaydedin
    previousScrollY = currentScrollY;
}

// Scroll olayını dinleyin
window.addEventListener("scroll", detectScrollDirection);

• previousScrollY değişkeni, bir önceki scrollY değerini saklar. İlk başta, bu değer mevcut scroll konumuna (window.scrollY) eşitlenir.
• detectScrollDirection fonksiyonu, scroll yönünü belirlemek için önceki scroll pozisyonu (previousScrollY) ile mevcut scroll pozisyonunu (currentScrollY) karşılaştırır.
  • currentScrollY > previousScrollY ise, kullanıcı aşağı kaydırıyordur.
  • currentScrollY < previousScrollY ise, kullanıcı yukarı kaydırıyordur.
• Bu kod, kullanıcının kaydırma hareketini takip eder ve konsola kaydırma yönünü yazar.

Aşağıdaki class ile webcomponent, react vb kütüphanelerde de tüm html elementlerde scroll yönüne göre işlemler yaptırabilirsiniz.

export default class Scroll {
	constructor(element, options = {}) {
		this.element = element;
		this.scrollPosX = 0;
		this.scrollPosY = 0;
		this.init();
		this.options = {
			onScroll: null,
			onScrollUp: null,
			onScrollDown: null,
			onScrollLeft: null,
			onScrollRight: null,
			onScrollEnd: null,
			onScrollStart: null,
			...options,
		};
	}

	init() {
		this.element.addEventListener("scroll", (e) => {
			this._direction(e);
			if (this.options.onScroll) {
				this.options.onScroll.bind(this)(e);
			}

			if (
				this.options.onScrollStart &&
				(e.target.scrollTop === 0 || e.target.scrollLeft === 0)
			) {
				this.options.onScrollStart.bind(this)(e);
			}
			if (
				this.options.onScrollEnd &&
				(e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight ||
					e.target.scrollLeft + e.target.clientWidth >= e.target.scrollWidth)
			) {
				this.options.onScrollEnd.bind(this)(e);
			}
		});
	}

	_direction(e) {
		if (this.scrollPosY < e.target.scrollTop) {
			this.direction = "down";
			if (this.options.onScrollDown) {
				this.options.onScrollDown.bind(this)(e);
			}
		} else if (this.scrollPosY > e.target.scrollTop) {
			this.direction = "up";
			if (this.options.onScrollUp) {
				this.options.onScrollUp.bind(this)(e);
			}
		}

		if (this.scrollPosX < e.target.scrollLeft) {
			this.direction = "right";
			if (this.options.onScrollRight) {
				this.options.onScrollRight.bind(this)(e);
			}
		} else if (this.scrollPosX > e.target.scrollLeft) {
			this.direction = "left";
			if (this.options.onScrollLeft) {
				this.options.onScrollLeft.bind(this)(e);
			}
		}
		this.scrollPosX = e.target.scrollLeft;
		this.scrollPosY = e.target.scrollTop;
	}
}

Comments