https://github.com/kanety/stimulus-iscroll

https://github.com/kanety/stimulus-iscroll

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-iscroll
• Owner: kanety
• License: mit
• Created: 2021-10-17T10:46:18.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:31:01.000Z (7 months ago)
• Last Synced: 2024-12-25T04:04:45.509Z (23 days ago)
• Language: JavaScript
• Size: 22.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-iscroll

A stimulus controller for simple infinite scroll.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-iscroll --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import IscrollController from '@kanety/stimulus-iscroll';

const application = Application.start();

application.register('iscroll', IscrollController);

```

Build html as follows:

```html



  

    

      

        header

        header

      

    

    

      

        content

        content

      

    

  

  


    prev

    index.1.html

    index.2.html

    index.3.html

    next

  



```


### Options

#### loading

Show specific element while loading:

```html



  


    

  



```


#### next-link

Set selector to get next link in paging target (default is `a.next`):

```html





```


You can set the selector globally:

```javascript

import IscrollController from '@kanety/stimulus-iscroll';

IscrollController.nextLink = 'a.next';

```

#### margin

Set margin height to start loading before reaching at the bottom of scroll bar:

```html





```


### Callbacks

Run callbacks when next page is loaded:

```javascript

let element = document.querySelector('[data-controller="iscroll"]');

element.addEventListener('iscroll:start', e => {

  console.log(e.detail.href);

});

element.addEventListener('iscroll:done', e => {

  console.log(e.detail.href);

  console.log(e.detail.error.content);  // new content element

  console.log(e.detail.error.paging);   // new paging element

});

element.addEventListener('iscroll:fail', e => {

  console.log(e.detail.href);

  console.log(e.detail.error.message);

});

element.addEventListener('iscroll:end', e => {

  console.log(e.detail.href);

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).