scroll-tabs

library1.0.1jsnpmunverified

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.

web-framework

npm install scroll-tabs

github ↗package ↗

INSTALL

IMPORT

SIG · SCROLL-TABS

scroll-tabs

web-frameworkjavascriptv1.0.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

scrollTabs

✓ import scrollTabs from 'scroll-tabs'

✗ const scrollTabs = require('scroll-tabs')

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

ScrollTabs

✓ import scrollTabs from 'scroll-tabs'

✗ import { ScrollTabs } from 'scroll-tabs'

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

Scroller

✓ const scroller = scrollTabs(el, options); scroller.on('scroll', handler)

✗ new scrollTabs(el, options)

scrollTabs is a factory function that returns an event emitter object; do not use 'new'.

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();

Debug

Known issues

breakingVersion 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.

affects: >=1.0.0

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

fix

Check for updates; currently no replacement.

affects: 1.0.x

gotchaThe scrollTabs function expects an HTML element, not a jQuery object or selector string.

fix

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

affects: >=0.1.0

gotchaThe ignore selector is optional; if not provided, no tabs are ignored.

fix

Omit the ignore option if not needed.

affects: >=0.1.0

Errors

Common errors & fixes

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

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.

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

scrollTabs expects an element, not a selector string.

fix

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

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

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

fix

Remove 'new'; scrollTabs is a factory function.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/bpmn-io/scroll-tabs ↗

packagehttps://www.npmjs.com/package/scroll-tabs ↗