{"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,"search_vec":"'1.0.0':52 '1.0.1':13 'activ':38,41,81 'add':8 'awar':58 'babelifi':63 'behavior':78 'browser':68,89 'browserifi':62,90 'bundl':65 'button':17 'compon':88 'contain':24 'direct':44 'either':19 'emit':31 'es':48,56 'event':34 'expos':47 'focus':73 'function':11 'handl':26 'javascript':85 'leav':79 'librari':46 'lightweight':71 'modul':49,57 'mous':27 'new':37 'node':39,42 'old':40 'provid':15 'requir':54 'rollup':61 'scroll':2,10,16,29,33,77,87 'scroll-tab':1 'side':20 'sinc':50 'sole':74 'tab':3,9,23,80,86 'tini':5 'transpil':59 'user':84 'util':6 'version':12,51 'webpack':60 'wheel':28","created_at":"2026-05-01T13:49:37.153855+00:00","updated_at":"2026-05-01T13:49:37.153855+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/bpmn-io/scroll-tabs","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/scroll-tabs","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}