PHPackages                             invis1ble/scrollbox - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. invis1ble/scrollbox

ActiveComponent[Utility & Helpers](/categories/utility)

invis1ble/scrollbox
===================

A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.

4.0.1(2mo ago)16314[3 PRs](https://github.com/Invis1ble/scrollbox/pulls)MITJavaScriptCI failing

Since Aug 11Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/Invis1ble/scrollbox)[ Packagist](https://packagist.org/packages/invis1ble/scrollbox)[ RSS](/packages/invis1ble-scrollbox/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (4)DependenciesVersions (35)Used By (0)

Scrollbox
=========

[](#scrollbox)

[![CI](https://github.com/Invis1ble/scrollbox/actions/workflows/test.yml/badge.svg)](https://github.com/Invis1ble/scrollbox/actions/workflows/test.yml)[![Maintainability](https://camo.githubusercontent.com/acd5984894f69b8056c882672ac529866aaff997260e5f0495a15fef2ba95610/68747470733a2f2f716c74792e73682f67682f496e76697331626c652f70726f6a656374732f7363726f6c6c626f782f6d61696e7461696e6162696c6974792e737667)](https://qlty.sh/gh/Invis1ble/projects/scrollbox)[![Bower version](https://camo.githubusercontent.com/3bcd9c044fd9a8416f9d66f1ad8658eb030ea2337377b41176ee5eaa57053384/68747470733a2f2f696d672e736869656c64732e696f2f626f7765722f762f7363726f6c6c626f782e737667)](https://camo.githubusercontent.com/3bcd9c044fd9a8416f9d66f1ad8658eb030ea2337377b41176ee5eaa57053384/68747470733a2f2f696d672e736869656c64732e696f2f626f7765722f762f7363726f6c6c626f782e737667)[![npm version](https://camo.githubusercontent.com/d4a03e977ccb35f1997bbd9e660b0ef9ca6f79dc67727d677e251cdce6680083/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f7363726f6c6c626f782e737667)](https://www.npmjs.com/package/scrollbox)[![Packagist Prerelease](https://camo.githubusercontent.com/50fc98e2d5c72992e5f00ce455b29be9c842635868620ba507dec0b712a10acf/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f496e76697331626c652f7363726f6c6c626f782e737667)](https://packagist.org/packages/Invis1ble/scrollbox)[![MIT licensed](https://camo.githubusercontent.com/7013272bd27ece47364536a221edb554cd69683b68a46fc0ee96881174c4214c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](./LICENSE)

A lightweight jQuery custom scrollbar plugin, that triggers event when reached the defined point.

[Demo Page](https://invis1ble.github.io/scrollbox/)

Table of contents
-----------------

[](#table-of-contents)

- [Browser compatibility](#browser-compatibility)
- [Installation](#installation)
- [Usage](#usage)
- [Basic features](#basic-features)
    - [Options](#options)
    - [Methods](#methods)
    - [Events](#events)
- [Infinite scrolling implementation example](#infinite-scrolling-implementation-example)
- [License](#license)

Browser compatibility
---------------------

[](#browser-compatibility)

- IE 7+
- Firefox
- Opera (old and new)
- Safari
- Chrome
- Chrome for Android

... and others.

Installation
------------

[](#installation)

Several quick start options are available:

- [Download the latest release](https://github.com/Invis1ble/scrollbox/archive/master.zip).
- Clone the repo: `git clone https://github.com/Invis1ble/scrollbox.git`.
- Install with [Bower](http://bower.io): `bower install scrollbox`.
- Install with [npm](https://www.npmjs.com/): `npm install scrollbox`.
- Install with [Composer](https://getcomposer.org): `composer require invis1ble/scrollbox`.

After installing the plugin you have to install [jquery-mousewheel](https://github.com/jquery/jquery-mousewheel). You can simply [download it as archive](https://github.com/jquery/jquery-mousewheel/archive/master.zip) and unpack to desired location.

Usage
-----

[](#usage)

In order to use the plugin, you have to include styles and script to your html e.g.:

```

```

Let's assume that you want to stylize the following element:

```

    Here is a long content

```

Then you should define `max-height` and/or `max-width` of that element:

```
#long-content-container {
    max-height: 200px;
    max-width: 200px;
}
```

and initialize Scrollbox:

```
$('#long-content-container').scrollbox();
```

That's all. Now if real size of the container is greater than the specified `max-height`/`max-width` then the plugin will add scrollbar to it.

You can stylize scrollbar via `css` or even better by overwriting corresponding `less` variables. See [src/less/](https://github.com/Invis1ble/scrollbox/tree/master/src/less) for more details.

Basic features
--------------

[](#basic-features)

### Options

[](#options)

Scrollbox uses several options to configuring behavior. The default options are:

```
{
    distanceToReach: {
        x: 0,
        y: 0
    },
    wheelSensitivity: 20,
    momentum: {
        acceleration: 1600,
        thresholdTime: 500
    },
    startAt: {
        x: 'left',
        y: 'top'
    },
    templates: {
        horizontalBar: '',
        verticalBar: '',
        horizontalRail: '',
        verticalRail: '',
        wrapper: ''
    }
}
```

You can optionally pass an object containing all of the options that you would like to initialize Scrollbox with e.g.:

```
$('#long-content-container').scrollbox({
    wheelSensitivity: 25,
    startAt: {
        y: 'bottom'
    }
});
```

or re-define default values for all instances:

```
$.fn.scrollbox.Constructor.getDefault().distanceToReach.y = 100;
```

#### startAt.x

[](#startatx)

The initial position of the scroll on x-axis.

The value can be `'left'`, `'right'` or number of pixels from the left boundary.

#### startAt.y

[](#startaty)

The initial position of the scroll on y-axis.

The value can be `'top'`, `'bottom'` or number of pixels from the top boundary.

#### distanceToReach.x

[](#distancetoreachx)

The distance from the left and right boundaries of the content when `reachleft.scrollbox` and `reachright.scrollbox` events should be triggered.

This option is useful when you want to implement so-called "infinite scrolling".

#### distanceToReach.y

[](#distancetoreachy)

The distance from the top and bottom boundaries of the content when `reachleft.scrollbox` and `reachright.scrollbox` events should be triggered.

This option is useful when you want to implement so-called "infinite scrolling".

#### wheelSensitivity

[](#wheelsensitivity)

The distance in pixels for one fixed step of mouse wheel.

You probably shouldn't change this value.

#### momentum.acceleration

[](#momentumacceleration)

Swipe acceleration factor.

#### momentum.thresholdTime

[](#momentumthresholdtime)

Threshold time in milliseconds for detect inertial moving at swipe.

#### templates

[](#templates)

Normally you don't need to change this templates, but you can if you want.

### Methods

[](#methods)

You can call some methods of the plugin.

#### .update()

[](#update)

Recalculates scrollbars' positions and sizes.

For example, If you write the infinite scroll implementation you have to update scrollbar position and size after content has been added. To do this you should simply call `.update()` method:

```
$('#long-content-container').scrollbox('update');
```

#### .scrollBy(deltaX, deltaY, animationOptions)

[](#scrollbydeltax-deltay-animationoptions)

Scrolls by pixels.

See [.animate()](https://api.jquery.com/animate/#animate-properties-options) for the available values of the `animationOptions`

Example:

```
$('#long-content-container').scrollbox('scrollBy', 100, 200);
```

If you want to scroll only on y-axis you can pass `0` as `deltaX` value:

```
$('#long-content-container').scrollbox('scrollBy', 0, 200);
```

#### .scrollTo(x, y, animationOptions)

[](#scrolltox-y-animationoptions)

Scrolls to specified position.

`x` can be integer (pixels), or string `'left'` or `'right'`.

`y` also can be integer (pixels), or string `'top'` or `'bottom'`.

`'left'`, `'right'`, `'top'` and `'bottom'` means the boundaries.

See [.animate()](https://api.jquery.com/animate/#animate-properties-options) for the available values of the `animationOptions`

Example:

```
$('#long-content-container').scrollbox('scrollTo', 100, 200);
```

If you want to scroll only on y-axis you can pass `undefined` as `x` value:

```
$('#long-content-container').scrollbox('scrollTo', undefined, 'bottom');
```

#### .destroy()

[](#destroy)

Completely removes all stuff from the element.

### Events

[](#events)

Scrollbox triggers a several events during lifecycle.

#### reachleft.scrollbox

[](#reachleftscrollbox)

Triggered when scrolling reach the left boundary of the content. Respects `distanceToReach.x` option.

#### reachright.scrollbox

[](#reachrightscrollbox)

Triggered when scrolling reach the right boundary of the content. Respects `distanceToReach.x` option.

#### reachtop.scrollbox

[](#reachtopscrollbox)

Triggered when scrolling reach the top boundary of the content. Respects `distanceToReach.y` option.

#### reachbottom.scrollbox

[](#reachbottomscrollbox)

Triggered when scrolling reach the bottom boundary of the content. Respects `distanceToReach.y` option.

Infinite scrolling implementation example
-----------------------------------------

[](#infinite-scrolling-implementation-example)

```
var $container = $('#content-container');

$container
    .on('reachbottom.scrollbox', function () {
        $.ajax({
            // options
        }).done(function (response) {
            $container
                .append(response)
                .scrollbox('update');
        });
    })
    .scrollbox({
        distanceToReach: {
            y: 100
        }
    });
```

License
-------

[](#license)

[The MIT License](./LICENSE)

###  Health Score

51

—

FairBetter than 95% of packages

Maintenance87

Actively maintained with recent releases

Popularity17

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity75

Established project with proven stability

 Bus Factor1

Top contributor holds 99% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~152 days

Recently: every ~868 days

Total

29

Last Release

80d ago

Major Versions

0.3.1 → 1.0.02016-03-30

1.0.0 → 2.0.02016-03-31

2.4.0 → 3.0.0-alpha2016-10-01

3.0.1 → 4.0.02017-01-22

### Community

Maintainers

![](https://www.gravatar.com/avatar/ee28103ae5837c559d134498f46d8c6869e598e174efbc453b427610153c67e1?d=identicon)[Invis1ble](/maintainers/Invis1ble)

---

Top Contributors

[![Invis1ble](https://avatars.githubusercontent.com/u/1710944?v=4)](https://github.com/Invis1ble "Invis1ble (196 commits)")[![Invis1bleReborn](https://avatars.githubusercontent.com/u/68089411?v=4)](https://github.com/Invis1bleReborn "Invis1bleReborn (2 commits)")

---

Tags

infinite-scrolljquery-pluginmomentumscrolltouch-devicestrigger-eventsuiuijquerytriggerinertiascrollscrollingscrollbarinfinite scrollingKinetictouchscreenmomentum

### Embed Badge

![Health badge](/badges/invis1ble-scrollbox/health.svg)

```
[![Health](https://phpackages.com/badges/invis1ble-scrollbox/health.svg)](https://phpackages.com/packages/invis1ble-scrollbox)
```

###  Alternatives

[webcreate/jquery-ias

Infinite Ajax Scroll: A jQuery plugin that turns your server-side pagination into an infinite scrolling one using AJAX

903736.3k3](/packages/webcreate-jquery-ias)[flesler/jquery.scrollto

Lightweight, cross-browser and highly customizable animated scrolling with jQuery

3.7k40.8k](/packages/flesler-jqueryscrollto)[yajra/laravel-datatables-oracle

jQuery DataTables API for Laravel

4.9k36.0M373](/packages/yajra-laravel-datatables-oracle)[livewire/flux

The official UI component library for Livewire.

9527.8M127](/packages/livewire-flux)[techlab/smartwizard

The awesome jQuery step wizard plugin

789101.6k2](/packages/techlab-smartwizard)[kop/yii2-scroll-pager

Infinite AJAX scrolling for Yii2 ListView widget

181732.8k10](/packages/kop-yii2-scroll-pager)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)