Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

primeng

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

like image 553
Sushil Kumar Avatar asked Jun 10 '20 11:06

Sushil Kumar


1 Answers

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 = () => { };
    }
}
like image 113
Sushil Kumar Avatar answered Sep 30 '22 05:09

Sushil Kumar