PHPackages                             nickdekruijk/horizontal-scroller - 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. nickdekruijk/horizontal-scroller

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

nickdekruijk/horizontal-scroller
================================

Add a horizontal scrolling element

3.2.0(1mo ago)1156MITJavaScript

Since May 28Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/nickdekruijk/horizontal-scroller)[ Packagist](https://packagist.org/packages/nickdekruijk/horizontal-scroller)[ RSS](/packages/nickdekruijk-horizontal-scroller/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (1)DependenciesVersions (10)Used By (0)

Horizontal Scroller
===================

[](#horizontal-scroller)

Make a natively horizontal-scrolling element better: drag it with the mouse, add prev/next buttons, and (optionally) play nicely with CSS scroll-snap.

Usage
-----

[](#usage)

Start with an element that already scrolls horizontally. For the prev/next buttons to position correctly, wrap it in a relatively positioned element:

```

            Item A
            Item B
            Item C

```

```
.relative {
    position: relative;
}
.horizontal-scroller {
    overflow-x: auto;
    overflow-y: hidden;
}
.items {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 40px;
}
.item {
    flex: 0 0 200px;
    padding: 5%;
    background-color: #ddd;
}
```

Then enhance it:

```

    new HorizontalScroller({
        selector: '.horizontal-scroller',
    });

```

Options
-------

[](#options)

All options are optional; the values below are the defaults.

OptionDefaultDescription`selector``".horizontal-scroller"`Elements to enhance.`draggable``true`Drag the element horizontally with the mouse. While draggable, text selection inside the element is disabled (a drag surface, not prose).`buttonLeft``true`Insert a prev button.`buttonRight``true`Insert a next button.`buttonClass``"horizontal-scroller-button"`Base class for the injected buttons.`disableSnapOnDrag``true`Turn CSS `scroll-snap` off (inline) while dragging with the mouse and back on for button navigation, so a free drag doesn't snap back mid-drag. No-op if you don't use scroll-snap. Touch swipe and wheel are untouched.`infinite``false`Loop the items by cloning them (disabled automatically when the content isn't wide enough to scroll).Buttons
-------

[](#buttons)

The prev/next buttons are injected as empty elements right after the scroller, so you style them yourself. They get the base class plus a `-left` / `-right` modifier, and a `hide` class when the scroller reaches that edge (so you can fade/hide them):

```
.horizontal-scroller-button {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
}
.horizontal-scroller-button-left {
    left: 0;
}
.horizontal-scroller-button-right {
    right: 0;
}
.horizontal-scroller-button.hide {
    display: none;
}
```

Scroll-snap
-----------

[](#scroll-snap)

Snap works out of the box — just declare it in CSS. With `disableSnapOnDrag` (on by default) a free mouse drag temporarily turns it off so it doesn't fight the drag, while the prev/next buttons scroll to an exact item and keep snap on:

```
.horizontal-scroller {
    scroll-snap-type: x mandatory;
}
.item {
    scroll-snap-align: start;
}
```

Optional: a thin scrollbar
--------------------------

[](#optional-a-thin-scrollbar)

A hairline scrollbar drawn inside a taller, easier-to-grab track, using WebKit's `::-webkit-scrollbar` pseudo-elements. The gradients paint a 1px line for the track and a slightly thicker line for the thumb (swap `#1f7a4d` for your accent colour):

```
.horizontal-scroller::-webkit-scrollbar {
    height: 13px;
}
.horizontal-scroller::-webkit-scrollbar-track {
    background: linear-gradient(transparent, transparent 6px, #1f7a4d 6px, #1f7a4d 7px, transparent 7px);
}
.horizontal-scroller::-webkit-scrollbar-thumb {
    background: linear-gradient(transparent, transparent 2px, #1f7a4d 2px, #1f7a4d 11px, transparent 11px);
}
.horizontal-scroller::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(transparent, transparent 2px, #000 2px, #000 11px, transparent 11px);
}
```

Note: WebKit (Chrome/Safari) only. Do **not** also set the standard `scrollbar-width`or `scrollbar-color` — Chrome ignores every `::-webkit-scrollbar-*` rule the moment either is present, and you'd lose the hairline. Firefox falls back to its default scrollbar.

Dragging
--------

[](#dragging)

While dragging, the element gets a `dragging` class (e.g. to switch the cursor to `grabbing`). See `demo.html` for a full working demo.

###  Health Score

43

—

FairBetter than 89% of packages

Maintenance94

Actively maintained with recent releases

Popularity16

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~96 days

Recently: every ~186 days

Total

9

Last Release

30d ago

Major Versions

2.1.0 → 3.0.02024-06-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/0b01fc7c2c39bbe8f87b4afa70ffe1cf2bb787310e1d22fcfed6ae527d4573bb?d=identicon)[nickdekruijk](/maintainers/nickdekruijk)

---

Top Contributors

[![nickdekruijk](https://avatars.githubusercontent.com/u/607302?v=4)](https://github.com/nickdekruijk "nickdekruijk (27 commits)")

---

Tags

javascripthorizontalscrollscrollbar

### Embed Badge

![Health badge](/badges/nickdekruijk-horizontal-scroller/health.svg)

```
[![Health](https://phpackages.com/badges/nickdekruijk-horizontal-scroller/health.svg)](https://phpackages.com/packages/nickdekruijk-horizontal-scroller)
```

###  Alternatives

[tightenco/ziggy

Use your Laravel named routes in JavaScript.

4.3k48.8M357](/packages/tightenco-ziggy)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k34.0M489](/packages/matthiasmullie-minify)[tedivm/jshrink

Javascript Minifier built in PHP

76440.8M192](/packages/tedivm-jshrink)[dkcwd/dkcwd-zf2-munee

Zend Framework 2 module leveraging 'munee' an asset optimisation library developed by Cody Lundquist. You can find munee at http://github.com/meenie/munee

102.1k](/packages/dkcwd-dkcwd-zf2-munee)

PHPackages © 2026

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