search

web-aid-kit / ngx-image-gallery

Probably the best Angular 4+ modal and inline image gallery. Angular upgrade for ng-image-gallery.
79 stars 47 forks source link

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

Open thatisuday opened 6 years ago

alexharrisdcj commented 6 years ago

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

ruant commented 6 years ago

Any workaround on this?

Artawower commented 6 years ago

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

TerehinAV commented 6 years ago

Same

jaco-terbraak commented 5 years ago

+1

jaco-terbraak commented 5 years ago

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.