Dynamic Content Scroller

Build a scrollable content viewer that can dynamically toggle scrolling, handle content updates, and properly clean up resources. The viewer should support adding/removing content items and allow users to enable or disable scrolling behavior.

Requirements

Create a content scroller component with the following functionality:

Scrolling Control

Implement methods to enable and disable scrolling dynamically. When disabled, the scroll container should not respond to user scroll gestures. When enabled, normal scrolling should work.

Dynamic Content Updates

The scroll container should handle dynamic content changes. When content is added or removed from the scrollable area, the scroller should recalculate its boundaries to accommodate the new content size.

Resource Cleanup

Implement proper cleanup to remove all event listeners and free resources when the scroller is no longer needed.

Test Cases

• When scrolling is disabled, user interactions should not move the scroll position @test
• When scrolling is enabled after being disabled, user interactions should move the scroll position @test
• After adding new content items, the scroller should allow scrolling to the newly added content @test
• After cleanup, event listeners should be removed and the instance should no longer function @test

Implementation

@generates

API

export interface ContentScrollerOptions {
  scrollY?: boolean;
  scrollX?: boolean;
  click?: boolean;
  probeType?: number;
}

export class ContentScroller {
  constructor(wrapper: HTMLElement, options?: ContentScrollerOptions);

  /**
   * Enable scrolling functionality
   */
  enableScroll(): void;

  /**
   * Disable scrolling functionality
   */
  disableScroll(): void;

  /**
   * Update scroller after content changes
   */
  updateContent(): void;

  /**
   * Clean up and destroy the scroller instance
   */
  cleanup(): void;

  /**
   * Get current enabled state
   */
  isEnabled(): boolean;
}

Dependencies { .dependencies }

@better-scroll/core { .dependency }

Provides smooth scrolling functionality with momentum and boundary handling.