scrollbar

Deprecated

scrollbar.js is deprecated. Style scrollbars natively with CSS instead — see MDN: Scrollbars styling.

import { initCustomScrollBars } from '@bbc/front-end-kit/js/utils/scrollbar';

Utility for initialising SimpleBar custom scrollbars on elements marked with [data-scrollbar=true].

`initCustomScrollBars(args = {})`

Scans a target element for [data-scrollbar=true] children and initialises a SimpleBar instance on each. After initialisation the attribute value is changed to 'ready' to prevent double-initialisation.

Parameters

args (object, optional):
- $target (Element, default document.body): The root element to scan for [data-scrollbar=true] children.
- config (object, optional): SimpleBar configuration options, merged over the defaults.

Default SimpleBar config

{ autoHide: false }

Returns

undefined

Example

<div data-scrollbar="true" style="height: 300px; overflow: auto;">
    <!-- scrollable content -->
</div>

import { initCustomScrollBars } from '@bbc/front-end-kit/js/utils/scrollbar';

initCustomScrollBars(); // scans document.body

// or with a specific root
initCustomScrollBars({
    $target: document.querySelector('.my-panel'),
    config: { autoHide: true }
});

Known bug

The current source passes scrollbars[i] to new SimpleBar(...) but scrollbars is never defined — $el was intended. This means initCustomScrollBars will throw a ReferenceError at runtime. Until the source is fixed, instantiate SimpleBar directly:

import SimpleBar from 'simplebar';

document.querySelectorAll('[data-scrollbar=true]').forEach($el => {
    new SimpleBar($el, { autoHide: false });
    $el.dataset.scrollbar = 'ready';
});

External dependencies

SimpleBar (simplebar): Custom scrollbar library.
lodash-es defaultsDeep: Merges caller config over the default autoHide: false.