HTML API

/**
 * Initialize all elements with data-simplebar attribute
 * Called automatically on DOM load, can be called manually for dynamic content
 */
static initDOMLoadedElements(): void;

<!-- Basic automatic initialization -->
<div data-simplebar>
  <p>Content that will have custom scrollbars</p>
  <p>More scrollable content...</p>
</div>

<!-- With configuration via data attributes -->
<div data-simplebar data-simplebar-auto-hide="false" data-simplebar-scrollbar-min-size="30">
  <p>Content with custom configuration</p>
</div>

// Manually initialize elements added after page load
document.body.innerHTML += '<div data-simplebar>New dynamic content</div>';
SimpleBar.initDOMLoadedElements();

/**
 * Initialize the HTML API with automatic element detection
 * Sets up global MutationObserver to detect new elements with data-simplebar
 * Called automatically when SimpleBar is imported in browser environment
 */
static initHtmlApi(): void;

/**
 * WeakMap storing references to all SimpleBar instances
 * Key: DOM element, Value: SimpleBar instance
 */
static instances: WeakMap<Node, SimpleBar>;

// Get existing instance from element
const element = document.querySelector('[data-simplebar]');
const instance = SimpleBar.instances.get(element);

if (instance) {
  // Use existing instance
  instance.recalculate();
  
  // Access scroll element
  const scrollEl = instance.getScrollElement();
  scrollEl.scrollTop = 100;
}

/**
 * Global MutationObserver that watches for new elements with data-simplebar
 */
static globalObserver: MutationObserver;

/**
 * Disconnect the global MutationObserver
 * Use when you no longer need automatic detection of new elements
 */
static removeObserver(): void;

// Disable automatic detection of new elements
SimpleBar.removeObserver();

// All existing instances continue to work
// But new elements with data-simplebar won't be automatically initialized

/**
 * Handles DOM mutations to initialize new elements or cleanup removed ones
 * @param mutations - Array of MutationRecord objects from MutationObserver
 */
static handleMutations(mutations: MutationRecord[]): void;

<!-- Auto-hide behavior -->
<div data-simplebar data-simplebar-auto-hide="false">Content</div>

<!-- Scrollbar sizing -->
<div data-simplebar 
     data-simplebar-scrollbar-min-size="20"
     data-simplebar-scrollbar-max-size="100">Content</div>

<!-- Track click behavior -->
<div data-simplebar data-simplebar-click-on-track="false">Content</div>

<!-- Force visibility -->
<div data-simplebar data-simplebar-force-visible="true">Content</div>
<div data-simplebar data-simplebar-force-visible="y">Content</div>

<!-- Accessibility -->
<div data-simplebar 
     data-simplebar-aria-label="Chat messages"
     data-simplebar-tab-index="1">Content</div>

// Disable automatic initialization
SimpleBar.removeObserver();

// Manual initialization for IE10
document.querySelectorAll('[data-simplebar]').forEach(el => {
  new SimpleBar(el);
});