NeverEndJs

NeverEndJs is a JavaScript library that allows you to add infinite scrolling or button loading functionality to your web pages. It presents content flows with continuous loading method instead of pagination.

Table of Contents

• Installation
• Basic Usage
• Features
• Configuration Options
• HTML Structure
• Usage Examples
• API
• FAQ

Installation

You can add NeverEndJs to your project using the following methods:

With NPM

npm install neverendjs

As a Direct Script

<script src="path/to/neverendjs.min.js"></script>

Basic Usage

1. Create HTML Structure

<div class="nend-container">
  <div class="nend-main">
    <!-- Main content element -->
    <div class="nend-item" data-nend='{
      "index": 0,
      "id": 3786658,
      "next": "/infinite/news/3786646",
      "title": "Example Title"
    }'>
      <!-- Content -->
    </div>
  </div>
  
  <!-- Loading method selection -->
  <div data-type="load-infinite-scroll">
    <div class="nend-loading-progress">Loading...</div>
  </div>
  
  <!-- OR -->
  
  <button data-type="load-infinite-button">Load More</button>
</div>

2. Initialize JavaScript Library

import Infinite from "neverendjs";

// Initialize with basic settings
const infinite = new Infinite();

// Or with custom settings
const customInfinite = new Infinite({
  container: ".custom-container",
  section: ".custom-item",
  offSetTop: 500,
  infiniteCallback: () => console.log("New content loaded")
});

Features

• Two Loading Methods:

  • Scroll-Based: Automatically loads content as the page is scrolled
  • Button-Based: Loads content when the user clicks a button

• Flexible Configuration: Numerous customization options

• Performance-Focused: Loading processes optimized with debounce technique

• API Integration: Easy integration with simple URL structure

• Browser History Support: Adds loaded pages to browser history

Configuration Options

| Parameter | Type | Default | Description | |-----------|-----|------------|----------| | attr | String | "data-nend" | Element data attribute | | container | String | ".nend-container" | Content container CSS selector | | mainSection | String | ".nend-main" | Main content section CSS selector | | section | String | ".nend-item" | Each content item CSS selector | | loading | String | ".nend-loading-progress" | Loading indicator CSS selector | | active | String | "nend-active" | Active item CSS class | | infiniteCallback | Function | () => {} | Function to run when loading is completed | | requestEndCallbackTime | Number | 1000 | Request completion callback time (ms) | | offSetTop | Number | 1000 | Pixel threshold for entering viewport | | mainUrl | String | "/" | Main URL path | | hiddenItems | String | null | CSS selector for items to be hidden |

HTML Structure

NeverEndJs requires a specific HTML structure. The basic structure is as follows:

Main Container

Container that encapsulates the entire infinite loading structure:

<div class="nend-container">
  <!-- Content will go here -->
</div>

Main Content Section

Section that contains content items:

<div class="nend-main">
  <!-- Content items will go here -->
</div>

Content Items

For each loadable content item:

<div class="nend-item" data-nend='{
  "index": 0,
  "id": 3786658,
  "next": "/infinite/news/3786646",
  "title": "Example Title"
}'>
  <!-- Content -->
</div>

The data-nend attribute should contain the following information in JSON format:

• index: The item's sequence number
• id: The item's unique identifier
• next: URL of the next content to be loaded (use "stop" value for the last item)
• title: Content title (optional)

Loading Method

For scroll loading:

<div data-type="load-infinite-scroll">
  <div class="nend-loading-progress">Loading...</div>
</div>

For button loading:

<button data-type="load-infinite-button">Load More</button>

Usage Examples

Basic Usage

// Initialize with basic settings
const infinite = new Infinite();

Usage with Custom Parameters

// Initialize with custom settings
const customInfinite = new Infinite({
  attr: "data-content",
  container: ".feed-container",
  section: ".article-card",
  offSetTop: 500,
  mainUrl: "/api/articles",
  infiniteCallback: () => {
    console.log("New content loaded");
    // Post-loading processes here
  }
});

Scroll-Based Loading Only

Add only the scroll loading structure in HTML:

<div data-type="load-infinite-scroll">
  <div class="nend-loading-progress">Loading...</div>
</div>

Button-Based Loading Only

Add only the button loading structure in HTML:

<button data-type="load-infinite-button">Load More</button>

API

Infinite Class

/**
 * Main class that provides infinite scrolling/loading functionality
 * @param {Object} params - Configuration parameters
 */
const infinite = new Infinite(params);

ScrollLoad Class

/**
 * Scroll-based loading mechanism
 * @param {Object} options - Configuration options
 */
import { ScrollLoad } from "neverendjs";
const scrollLoader = new ScrollLoad(options);

ButtonLoad Class

/**
 * Button-based loading mechanism
 * @param {Object} options - Configuration options
 */
import { ButtonLoad } from "neverendjs";
const buttonLoader = new ButtonLoad(options);

FAQ

How does NeverEndJs work?

NeverEndJs tracks the URL of the next content to be loaded using special data attributes (data-nend) on the page. When the user approaches the end of the page or clicks the "Load More" button, it retrieves the next content with an AJAX request and adds it to the page.

Is user position preserved in case of page refresh?

Yes, NeverEndJs uses the browser history API to ensure that the user returns to the same content position even when they refresh the page.

How is performance on mobile devices?

NeverEndJs uses the debouncing technique to optimize scroll events, which provides a performance boost especially on mobile devices.

Can it be used with custom API endpoints?

Yes, you can specify your own API endpoints with the mainUrl parameter.

Is it SEO-friendly?

As NeverEndJs loads dynamic content, you may need to take additional measures for SEO optimization. It's important to create unique URLs for each page and update the page title.

License

MIT License - Copyright (c) [2025] [AfkanOzdemir]