I am using angular with Ionic framework. There is “tiktok” style of videos scroll. I can’t trigger infinite generator for videos(but for items it works). I am using this: Infinite Scroller | ion-infinite-scroll Action Component and example from page works fine:
<ion-item *ngFor="let item of items; let index">
<ion-avatar slot="start">
<img [src]="'https://picsum.photos/80/80?random=' + index" alt="avatar" />
</ion-avatar>
<ion-label>{{ item }}</ion-label>
</ion-item>
<ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
Loading...
<ion-infinite-scroll-con
When I am trying to use if for videos and it does not work:
<div class="app_videos" id="content">
<div class="video" *ngFor="let item of items; let index">
<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" autoplay="autoplay" class="video_player"></video>
</div>
<ion-infinite-scroll (ionInfinite)="onIonInfinite($event)">
Loading...
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
page.ts:
private generateItems() {
const count = this.items.length + 1;
for (let i = 0; i < 10; i++) {
this.items.push(count + i);
}
}
onIonInfinite(ev: any) {
this.generateItems();
setTimeout(() => {
(ev as InfiniteScrollCustomEvent).target.complete();
}, 100);
}
and CSS:
.app_videos::-webkit-scrollbar {display: none;}
.app_videos{
-ms-overflow-style: none;
scrollbar-width: none;
}
.video{
position: relative; height: 100%; width: 100%; background-color: white;
scroll-snap-align: start;
}
.video_player{
object-fit: cover; width: 100%; height: 100%;
}
@media (max-width: 425px) {.app_videos{ width: 100%; height: 100%; max-width: 100%; border-radius: 0px; } }
I think the main issue is on scroll-snap-align whci provides me “tiktok” scroll style.
Is there is the way to fix it and keep “tiktok” scroll style?