jQuery InfiniteScroll.js Tutorial to Build Infinite Scroll to Load Dynamic Data Using AJAX in Browser Using HTML5 & Javascript Full Project For Beginners





  • JQuery Infinity Scroll plagin

Demo Page


How it works

This plugin is a JQuery plugin that enables infinite scrolling. Download infinityScroll.css and infinityScroll.min.js in the dist directory of this repository and load them into your HTML file.

  • ja このプラグインは無限スクロールを実現するJQueryプラグインです。 このリポジトリのdistディレクトリにあるinfinityScroll.cssinfinityScroll.min.jsをダウンロードして、HTMLファイルに読み込んでください。
<!-- read <head> infinityScroll.css -->
<link rel="stylesheet" href="dist/infinityScroll.css">
<!-- read <body> infinityScroll.min.js -->
<script src="dist/infinityScroll.min.js"></script>

Infinity Scroll Init / Set Up

After loading infinityScroll.min.js into an HTML file, set up the <script> tag with the following code. Display a message after loading all content.

  • ja infinityScroll.min.jsをHTMLファイルに読み込んだ後に、 <script>タグに以下のようなコードでセットアップをおこないます。 Ajaxで読み込むHTMLはload.htmlに記述します。
  • config
const config = {
        type : "html", 
        data : "load.html", // infinite scrolling Contents HTML
        loadListClass : "is-load-list", // infinite scrolling Contents HTML ClassList
        renderInit : 2, // initial value :2   It works even if not write.  List to display first
        scrollEndMessage : "read all contents!", // It works even if not write. Display a message after loading all content.

// infinite scrolling Contents Show ParentNode
  • load.html
<!-- config.data  -->
<div class="is-load-list"> <!-- config.loadListClass's ClassList -->
    <img src="smaple/images/a5cJ6tTI8uQ.jpg" alt="">
<div class="is-load-list">
    <img src="smaple/images/BKxFj0ogp2M.jpg" alt="">
<div class="is-load-list">
    <img src="smaple/images/FU3vZToCZQ4.jpg" alt="">


Data treated as infinite scroll is read and displayed by Ajax under the HTML tag specified in config.

  • ja 無限スクロールとして扱うデータはconfigで指定したHTMLタグの下にAjaxで読み込まれて表示されます.

    <!-- read infinityScroll.css -->
    <link rel="stylesheet" href="dist/infinityScroll.css">
    <div id="element">
        <!-- render load.html -->

    <!-- read JQuery -->
    <!-- infinityScroll.min.js -->
    <script src="dist/infinityScroll.min.js"></script>
        const config = {
                type : "html",
                data : "load.html",
                loadListClass : "is-load-list",
                renderInit : 2,
                scrollEndMessage : "read all contents!",






Leave a Reply