scroll-tabs

1.0.1 verified Fri May 01 auth: no javascript

A tiny utility that adds tab scrolling functionality. Version 1.0.1. It provides scroll buttons on either side of a tab container and handles mouse wheel scrolling. It emits a 'scroll' event with the new active node, old active node, and direction. This library exposes ES modules since version 1.0.0 and requires an ES module aware transpiler (Webpack, Rollup, Browserify + babelify) to bundle for the browser. It is lightweight and focuses solely on the scrolling behavior, leaving tab activation to the user.

Common errors

error const scrollTabs = require('scroll-tabs'); // TypeError: scrollTabs is not a function ↓

cause Package is ESM-only since v1.0.0 and does not export a CommonJS module.

fix

Use import scrollTabs from 'scroll-tabs' and use an ES module bundler.

error scrollTabs('#my-tabs', { ... }); // TypeError: Cannot read properties of null (reading 'querySelector') ↓

cause scrollTabs expects an element, not a selector string.

fix

Pass document.querySelector('#my-tabs') or a DOM element.

error Uncaught TypeError: scrollTabs(...).on is not a function ↓

cause Calling new scrollTabs(...) returns an object without 'on' method.

fix

Remove 'new'; scrollTabs is a factory function.

Warnings

breaking Version 1.0.0 changed from CommonJS to ES modules. Package no longer works with require(). ↓

fix Use import scrollTabs from 'scroll-tabs' and bundle with an ES module aware tool.

deprecated The 'active' selector in options is deprecated; use 'activeClass' or similar pattern in future versions. ↓

fix Check for updates; currently no replacement.

gotcha The scrollTabs function expects an HTML element, not a jQuery object or selector string. ↓

fix Pass document.querySelector('.my-container') or similar.

gotcha The ignore selector is optional; if not provided, no tabs are ignored. ↓

fix Omit the ignore option if not needed.

Install

npm install scroll-tabs

yarn add scroll-tabs

pnpm add scroll-tabs

Imports

scrollTabs

wrong

const scrollTabs = require('scroll-tabs')

correct

import scrollTabs from 'scroll-tabs'

ESM-only since v1.0.0; use default import.

ScrollTabs

wrong

import { ScrollTabs } from 'scroll-tabs'

correct

import scrollTabs from 'scroll-tabs'

The package exports a default function, not a named export.

Scroller
wrong
```
new scrollTabs(el, options)
```
correct
```
const scroller = scrollTabs(el, options); scroller.on('scroll', handler)
```
scrollTabs is a factory function that returns an event emitter object; do not use 'new'.

Quickstart

Shows importing scrollTabs, initializing with a container element and selector options, listening to scroll events, and updating after changes.

import scrollTabs from 'scroll-tabs';

const container = document.querySelector('#my-tabs');
const scroller = scrollTabs(container, {
  selectors: {
    tabsContainer: '.tabs-container',
    tab: '.tab',
    ignore: '.ignore',
    active: '.active'
  }
});

scroller.on('scroll', (newActive, oldActive, direction) => {
  console.log('Scrolled', direction, 'from', oldActive, 'to', newActive);
});

// After dynamic tab changes or resize:
scroller.update();