React ve IntersectionObserver ile Modern ScrollSpy Oluşturma

React ve IntersectionObserver ile Modern ScrollSpy Oluşturma

Merhaba! Bu yazıda, React ve IntersectionObserver API’sini kullanarak modern ve performanslı bir scrollspy bileşeni nasıl oluşturacağınızı adım adım açıklayacağım. Klasik scrollspy yöntemlerinden farklı olarak, IntersectionObserver performans açısından çok daha avantajlıdır. Öncelikle, scrollspy’ın ne olduğunu ve neden IntersectionObserver’ı tercih etmemiz gerektiğini inceleyelim.

Scrollspy, web sayfalarında gezinmeyi kolaylaştırmak için kullanılan bir özelliktir. Kullanıcı sayfanın aşağısına doğru kaydırdığında, belirli bölümlere karşılık gelen menü öğeleri aktif hale gelir. Bu sayede, kullanıcılar sayfanın hangi bölümünde olduklarını kolayca takip edebilirler. Ancak, geleneksel scrollspy uygulamaları, performans sorunlarına yol açabilir. Özellikle uzun sayfalarda, sürekli olarak pencere kaydırma olaylarını dinlemek, kaynak tüketimine neden olabilir.

İşte bu noktada IntersectionObserver devreye giriyor. IntersectionObserver API’sı, bir hedef elementin viewport ile kesişimini izlemek için tasarlanmıştır. Bu sayede, yalnızca görünür bölümlere karşılık gelen menü öğelerini güncellememiz yeterli olur. Bu da, performans açısından büyük bir iyileşme sağlar.

IntersectionObserver ile Scrollspy Bileşeni Oluşturma

Şimdi, React ile IntersectionObserver kullanarak bir scrollspy bileşeni oluşturacağız. Bu bileşen, sayfadaki bölümleri ve bunlara karşılık gelen menü öğelerini takip edecek ve aktif menü öğelerini dinamik olarak güncelleyecektir. Öncelikle, gerekli bağımlılıkları eklemeliyiz.

// React bileşenimizin yapısı
import React, { useState, useEffect, useRef } from 'react';

const ScrollSpy = () => {
  const [activeSection, setActiveSection] = useState(null);
  const sections = useRef([]);

  const handleIntersection = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setActiveSection(entry.target.id);
      }
    });
  };

  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersection);

    sections.current.forEach(section => {
      observer.observe(section);
    });

    return () => observer.disconnect();
  }, []);

  return (
    <div>
      <nav>
        <ul>
          {sections.current.map(section => (
            <li key={section.id} className={activeSection === section.id ? 'active' : ''}>
              <a href={#${section.id}}>{section.id}</a>
            </li>
          ))}
        </ul>
      </nav>
      {sections.current.map(section => (
        <section key={section.id} id={section.id} ref={(el) => { sections.current.push(el); }}>
          <h2>{section.id}</h2>
          <p>Bu {section.id} bölümünün içeriği</p>
        </section>
      ))}
    </div>
  );
};

export default ScrollSpy;

Bu kodda, öncelikle IntersectionObserver örneğini oluşturuyoruz. Ardından, her bir section elementi için observer’ı çalıştırıyoruz. handleIntersection fonksiyonu, kesişim durumunu kontrol eder ve aktif section’ı günceller. Sonuç olarak, performanslı ve modern bir scrollspy deneyimi elde ederiz.

Bu örnek, basit bir scrollspy oluşturmayı göstermektedir. Daha karmaşık uygulamalar için, bu kodu özelleştirebilirsiniz. Örneğin, farklı animasyonlar ekleyebilir veya daha gelişmiş kullanıcı etkileşimleri oluşturabilirsiniz. Daha detaylı bilgi ve örnekler için fatihsoysal.com adresini ziyaret edebilirsiniz.

Umarım bu makale, React ve IntersectionObserver ile modern scrollspy oluşturma konusunda size yardımcı olmuştur. Herhangi bir sorunuz varsa, yorum bölümünde bana ulaşabilirsiniz.

#Etiketler: React, IntersectionObserver, Scrollspy, JavaScript, Web Geliştirme, Performans, Örnek Kod, Tutorial, Fatih Soysal