React ve IntersectionObserver ile Modern ScrollSpy Olu\u015fturma<\/p>\n
Merhaba! Bu yaz\u0131da, React ve IntersectionObserver API’sini kullanarak modern ve performansl\u0131 bir scrollspy bile\u015feni nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131m. Klasik scrollspy y\u00f6ntemlerinden farkl\u0131 olarak, IntersectionObserver performans a\u00e7\u0131s\u0131ndan \u00e7ok daha avantajl\u0131d\u0131r. \u00d6ncelikle, scrollspy’\u0131n ne oldu\u011funu ve neden IntersectionObserver’\u0131 tercih etmemiz gerekti\u011fini inceleyelim.<\/p>\n
Scrollspy, web sayfalar\u0131nda gezinmeyi kolayla\u015ft\u0131rmak i\u00e7in kullan\u0131lan bir \u00f6zelliktir. Kullan\u0131c\u0131 sayfan\u0131n a\u015fa\u011f\u0131s\u0131na do\u011fru kayd\u0131rd\u0131\u011f\u0131nda, belirli b\u00f6l\u00fcmlere kar\u015f\u0131l\u0131k gelen men\u00fc \u00f6\u011feleri aktif hale gelir. Bu sayede, kullan\u0131c\u0131lar sayfan\u0131n hangi b\u00f6l\u00fcm\u00fcnde olduklar\u0131n\u0131 kolayca takip edebilirler. Ancak, geleneksel scrollspy uygulamalar\u0131, performans sorunlar\u0131na yol a\u00e7abilir. \u00d6zellikle uzun sayfalarda, s\u00fcrekli olarak pencere kayd\u0131rma olaylar\u0131n\u0131 dinlemek, kaynak t\u00fcketimine neden olabilir.<\/p>\n
\u0130\u015fte bu noktada IntersectionObserver devreye giriyor. IntersectionObserver API’s\u0131, bir hedef elementin viewport ile kesi\u015fimini izlemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu sayede, yaln\u0131zca g\u00f6r\u00fcn\u00fcr b\u00f6l\u00fcmlere kar\u015f\u0131l\u0131k gelen men\u00fc \u00f6\u011felerini g\u00fcncellememiz yeterli olur. Bu da, performans a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck bir iyile\u015fme sa\u011flar.<\/p>\n
\u015eimdi, React ile IntersectionObserver kullanarak bir scrollspy bile\u015feni olu\u015fturaca\u011f\u0131z. Bu bile\u015fen, sayfadaki b\u00f6l\u00fcmleri ve bunlara kar\u015f\u0131l\u0131k gelen men\u00fc \u00f6\u011felerini takip edecek ve aktif men\u00fc \u00f6\u011felerini dinamik olarak g\u00fcncelleyecektir. \u00d6ncelikle, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 eklemeliyiz.<\/p>\n
\n\/\/ React bile\u015fenimizin yap\u0131s\u0131\nimport React, { useState, useEffect, useRef } from 'react';\n\nconst ScrollSpy = () => {\n const [activeSection, setActiveSection] = useState(null);\n const sections = useRef([]);\n\n const handleIntersection = (entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n setActiveSection(entry.target.id);\n }\n });\n };\n\n useEffect(() => {\n const observer = new IntersectionObserver(handleIntersection);\n\n sections.current.forEach(section => {\n observer.observe(section);\n });\n\n return () => observer.disconnect();\n }, []);\n\n return (\n <div>\n <nav>\n <ul>\n {sections.current.map(section => (\n <li key={section.id} className={activeSection === section.id ? 'active' : ''}>\n <a href={#${section.id}}>{section.id}<\/a>\n <\/li>\n ))}\n <\/ul>\n <\/nav>\n {sections.current.map(section => (\n <section key={section.id} id={section.id} ref={(el) => { sections.current.push(el); }}>\n <h2>{section.id}<\/h2>\n <p>Bu {section.id} b\u00f6l\u00fcm\u00fcn\u00fcn i\u00e7eri\u011fi<\/p>\n <\/section>\n ))}\n <\/div>\n );\n};\n\nexport default ScrollSpy;\n<\/code><\/pre>\nBu kodda, \u00f6ncelikle IntersectionObserver \u00f6rne\u011fini olu\u015fturuyoruz. Ard\u0131ndan, her bir section elementi i\u00e7in observer’\u0131 \u00e7al\u0131\u015ft\u0131r\u0131yoruz. handleIntersection fonksiyonu, kesi\u015fim durumunu kontrol eder ve aktif section’\u0131 g\u00fcnceller. Sonu\u00e7 olarak, performansl\u0131 ve modern bir scrollspy deneyimi elde ederiz.<\/p>\n