v2.5.2
Giriş yap

İnfinite Scroll Nasıl Yapılır?

ilkertuncer
530 defa görüntülendi
2

Bana konularımı çektieceğim infinite scroll lazım. Yardım edebilirseniz sevinirim!

php sql mysql javascript
Cevap yaz
Cevaplar (2)
ilkertuncer
746 gün önce

Merhabalar @ebykdrms. Kodları aynı şekilde, oluşturduğum sayfalarıma yapıştırdım fakat kod çalışmıyor :*/

Scroll sayfanın sonuna gelmesine rağmen hiçbir etki olmuyor.

Bunun çalışmasını değil de sayfa 1 - 2 - 3 olarak URL e yansıması daha iyi olur.

Onu nasıl yapabiliriz? yardımcı olursanız sevinirim.

0
#009834
ebykdrms
746 gün önce

Infinite scroll, hangi front-end javascript teknolojisini kullandığınıza göre farklı şekillerde yapılabilir. React, Vue veya Svelte kullanıyorsanız yeniden oluşturmanıza gerek kalmadan bunlara uygun bileşenler kullanabilirsiniz.
Diyelim ki JQuery kullanıyorsunuz. O zaman kendi yolunuzu kendiniz geliştirmelisiniz. Örnek olarak şöyle bir kod yazalım:
index.html

<html>
    <head>
        <title>Infinite Scroll</title>
        <link rel="stylesheet" href="index.css" />
    </head>
    <body>
        <div id="content">
            <div class="page" style="background-color:red;">Sayfa 1</div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

Örnek bir sayfa oluşturduk. Bu sayfaya index.css ve index.js dosyalarını da dahil ettik. Ayrıca CDN üzerinden jquery de çağırdık.
Bir adet div#content elementimizin içine bir adet div.page elementi ekledik ve içine de Sayfa 1 yazdık.
Sonradan div#content elementine eklenecek sayfalarla karışmasın diye div.page elementine kırmızı bir arkaplan verdik. Buraya eklenecek diğer sayfalara da farklı arkaplan renkleri vereceğiz ve böylece sayfa geçişlerini görebilmiş olacağız.

index.css

* { margin: 0; padding:0; box-sizing: border-box; }
html, body { width:100vw; height:100vh; }
#content { width: 100vw; height: 100vh; overflow-y: scroll; }
#content .page { width: 100vw; height: 150vh; display: flex; align-items: center; justify-content:center; font-size:72px; }

html ve body elementlerinin ekranın tamamını kaplamasını sağladık.
div#content elementimizin de aynı şekilde ekranın tamamını kaplamasını sağladık ve Y yönünde scroll özelliği olmasını istedik.
div.page elementimize de ekranın %150'si kadar yükseklik verdik ve içindeki yazıyı ortaladık. HTML içinde inline olarak da zaten kırmızı renk vermiştik.
Şimdi amacımız, div#content elementinde scroll olayı gerçekleştiğinde bu olayı dinlemek ve scroll eğer sayfanın sonuna gelmişse otomatik olarak yeni bir sayfa eklemek...

index.js

var bgColors = ["green","blue","yellow","red"];
var $content = $("#content");
$content.on("scroll", function(e) {
    var contentScrollTop = $content.scrollTop() + $content.height();
    var pageCount =  $content.find(".page").length;
    var contentHeight = $content.find(".page").height() * pageCount;
    if(contentScrollTop - contentHeight < 100) {
        $content.append("<div class='page' style='background-color:"+bgColors[pageCount%4]+"'>Sayfa "+pageCount+"</div>");
    }
});

Kodları test edemedim ama aşağı yukarı böyle bir algoritma kullanabilirsiniz...

DÜZELTME

Yukarıdaki javascript kodlarında var $content = $(".content"); yazmışım.
var $content = $("#content"); olarak düzelttim.

O an hangi sayfayı görüntülediğimizin URL'ye yazılması konusu biraz daha detaylı bir konu. O an hangi sayfanın görüntülendiğini tespit edecek hesaplamalar yapmak veya inview gibi JQuery eklentileri kullanmak mümkün. Bu sorunun kapsamı dışında olduğu için bu konuya girmiyorum. Inview kullanımını araştırabilirsiniz.

1
#009833