When reactToMouseWheel set to false, page should scroll but it does not

[thatisuday]

[alexharrisdcj]

This bug seems to be present regardless of the 'reactToMouseWheel' setting.

[ruant]

Any workaround on this?

[Artawower]

Same issue, when i try scroll on gallery page not react, any solutions?

[TerehinAV]

Same

[jaco-terbraak]

+1

[jaco-terbraak]

Workaround:

1. Create a container around the gallery:

<div #galleryContainer>
  <ngx-image-gallery ... ></ngx-image-gallery>
</div>

2. Create a ViewChild in the controller:

@ViewChild('galleryContainer')
public galleryContainer: ElementRef;

3. Make the controller implement AfterViewInit:

public ngAfterViewInit(): void {
  this.hackGalleryScrollEvent();
}

4. Stop the scroll event propagation, capture it and bubble up:

// TODO: Remove once this bug is fixed (https://github.com/thatisuday/ngx-image-gallery/issues/14)
private hackGalleryScrollEvent() {
  const el = (<HTMLDivElement>this.galleryContainer.nativeElement);
  el.addEventListener('mousewheel', (event) => {
    event.stopPropagation();
  }, {
    capture: true
  });
}

The page should now scroll when you scroll on the gallery.