htmlcssprimeng

Can't vertical scroll page on mobile devices with full width PrimeNg carousel

I have a full width carousel on a page, most of the area of the page is covered by the carousel. On mobile screen when I try to scroll vertically, it does not work.

You can check the behavior here, try to scroll on image. https://primefaces.org/primeng/showcase/#/carousel

Solution

  • I have found a solution to this issue. If we override the onTouchMove method, the scroll would start working. Because in the plugin implementation of this method default event is prevented.

    import { Carousel } from 'primeng/carousel';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {

    constructor() {
        Carousel.prototype.onTouchMove = () => { };
    }
}