{"id":26368,"library":"scroll-tabs","title":"scroll-tabs","description":"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.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/bpmn-io/scroll-tabs","tags":["javascript","tabs","scroll","component","browser","browserify"],"install":[{"cmd":"npm install scroll-tabs","lang":"bash","label":"npm"},{"cmd":"yarn add scroll-tabs","lang":"bash","label":"yarn"},{"cmd":"pnpm add scroll-tabs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only since v1.0.0; use default import.","wrong":"const scrollTabs = require('scroll-tabs')","symbol":"scrollTabs","correct":"import scrollTabs from 'scroll-tabs'"},{"note":"The package exports a default function, not a named export.","wrong":"import { ScrollTabs } from 'scroll-tabs'","symbol":"ScrollTabs","correct":"import scrollTabs from 'scroll-tabs'"},{"note":"scrollTabs is a factory function that returns an event emitter object; do not use 'new'.","wrong":"new scrollTabs(el, options)","symbol":"Scroller","correct":"const scroller = scrollTabs(el, options); scroller.on('scroll', handler)"}],"quickstart":{"code":"import scrollTabs from 'scroll-tabs';\n\nconst container = document.querySelector('#my-tabs');\nconst scroller = scrollTabs(container, {\n  selectors: {\n    tabsContainer: '.tabs-container',\n    tab: '.tab',\n    ignore: '.ignore',\n    active: '.active'\n  }\n});\n\nscroller.on('scroll', (newActive, oldActive, direction) => {\n  console.log('Scrolled', direction, 'from', oldActive, 'to', newActive);\n});\n\n// After dynamic tab changes or resize:\nscroller.update();","lang":"javascript","description":"Shows importing scrollTabs, initializing with a container element and selector options, listening to scroll events, and updating after changes."},"warnings":[{"fix":"Use import scrollTabs from 'scroll-tabs' and bundle with an ES module aware tool.","message":"Version 1.0.0 changed from CommonJS to ES modules. Package no longer works with require().","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Check for updates; currently no replacement.","message":"The 'active' selector in options is deprecated; use 'activeClass' or similar pattern in future versions.","severity":"deprecated","affected_versions":"1.0.x"},{"fix":"Pass document.querySelector('.my-container') or similar.","message":"The scrollTabs function expects an HTML element, not a jQuery object or selector string.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Omit the ignore option if not needed.","message":"The ignore selector is optional; if not provided, no tabs are ignored.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use import scrollTabs from 'scroll-tabs' and use an ES module bundler.","cause":"Package is ESM-only since v1.0.0 and does not export a CommonJS module.","error":"const scrollTabs = require('scroll-tabs'); // TypeError: scrollTabs is not a function"},{"fix":"Pass document.querySelector('#my-tabs') or a DOM element.","cause":"scrollTabs expects an element, not a selector string.","error":"scrollTabs('#my-tabs', { ... }); // TypeError: Cannot read properties of null (reading 'querySelector')"},{"fix":"Remove 'new'; scrollTabs is a factory function.","cause":"Calling new scrollTabs(...) returns an object without 'on' method.","error":"Uncaught TypeError: scrollTabs(...).on is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}