0–25% zone

Giriş

Bu sayfa ScrollTracker kütüphanesini test etmek için tasarlandı. Header ve footer sayfa yüksekliğine dahil edilmiyor — ölçüm yalnızca bu main-content alanı üzerinden yapılıyor.

Sağdaki panelden event'leri gerçek zamanlı olarak izleyebilirsin. Her threshold için dwell süresi dolduğunda event tetiklenir. Hızlı scroll yaparak "scanned", yavaş kalarak "engaged" event üretebilirsin.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae urna quis lorem tincidunt facilisis. Proin venenatis diam sit amet mauris scelerisque, a facilisis augue gravida.

İçerik Bloğu A

Aliquam erat volutpat. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien proin quam. Etiam ultrices suscipit arcu, eget dictum ligula gravida quis.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

25–50% zone

İçerik Bloğu B

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis molestie dictum semper, diam lectus aliquam ligula, ut dapibus erat turpis vel est.

Fusce et diam at eros fringilla porttitor eget ut felis. Nullam volutpat gravida lorem nec vulputate. Morbi posuere fermentum laoreet.

Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Integer vitae eros viverra, scelerisque enim vitae, tincidunt velit.

İçerik Bloğu C

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in.

Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

50–75% zone

İçerik Bloğu D

Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lazy load — height_version değişti

Dinamik Blok 1

Bu blok lazy load ile yüklendi. ResizeObserver bunu yakaladı ve height_version arttırıldı. Eğer reEntry: "per_height_version" seçildiyse, daha önce geçilen threshold'lar tekrar fire edilebilir hale geldi.

Sağdaki panelden height_version değerinin değiştiğini görebilirsin. Event'lerde artık yeni bir height_version değeri iletilecek.

Dinamik Blok 2

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus.

Dinamik Blok 3

Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

75–100% zone

İçerik Sonu

Buraya kadar scroll ettiysen content_scroll event'i %100 threshold'unda tetiklenecek. Dwell süresi dolmadan hızlıca geçersen "scanned", yeterli süre kalırsan "engaged" olarak etiketlenecek.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum.