pixijs / ui

Commonly used UI components for PixiJS
https://pixijs.io/ui/
MIT License
187 stars 17 forks source link

[Feature request]: Add scroll event listener to ScrollBox #177

Closed CatchABus closed 1 month ago

CatchABus commented 2 months ago

Please Describe The Problem To Be Solved It would be useful to have a scroll event handler for ScrollBox for things like updating the position of a custom scroll bar.

(Optional): Suggest A Solution Since ScrollBox methods are marked as protected, I created a new class that inherits from it along with event handler support and few properties.

class TrackableScrollBox extends ScrollBox {
  onScroll: Signal<(value: number) => void> = new Signal();

  protected onMouseScroll(event: WheelEvent): void {
    const isVertical: boolean = this.options.type !== 'horizontal';
    const oldScrollPos = isVertical ? this.scrollY : this.scrollX;

    super.onMouseScroll(event);

    const newScrollPos = isVertical ? this.scrollY : this.scrollX;

    if (newScrollPos !== oldScrollPos) {
      this.onScroll?.emit(newScrollPos);
    }
  }

  get scrollHeight(): number {
    return this.list.height;
  }

  get scrollWidth(): number {
    return this.list.width;
  }
}