Horizontal scroll ionic2

[kodeine]

Following does not load the image on horizontal scroll.

            <ion-scroll scrollX="true" #lazyContainer>
                <!--<img class="thumbnail-avatar" *ngFor="let item of items" src="http://placehold.it/350x150">-->
                <img class="thumbnail-avatar-square spacer" *ngFor="let item of recent"
                     (click)="tapped(item)"
                     [scrollObservable]="lazyContainer.ionScroll"
                     [lazyLoad]="item.avatar">
            </ion-scroll>

[tjoskar]

Hi,

I guess that lazyContainer.ionScroll only emits events when scrolling vertically for some reason. Can you try to print the value of ionScroll to see if its emits any values when you are scrolling.

<ion-scroll scrollX="true" #lazyContainer>
  <img class="thumbnail-avatar-square spacer" *ngFor="let item of recent"
    (click)="tapped(item)"
    [scrollObservable]="lazyContainer.ionScroll"
    [lazyLoad]="item.avatar">
  {{ lazyContainer.ionScroll | async | json }}
</ion-scroll>

[tjoskar]

@kodeine please feel free to reopen this issue if the problem still occurs

[fmendoza]

Hi there,

First... @tjoskar congratulations. This work as expected on Ionic 3.9.2. However, I have the same issue with ion-scroll. I just tried to print the value of ionScroll with the async/json pipe and is returning null. So I guess that's the reason is not working.

Any workaround for this ionic issue?

[fmendoza]

Update: I tried the same with a working example and also ionScroll is returning null?

[fmendoza]

Got it working. The key is to set scrollTarget to scroll._scrollContent.nativeElement

Full code below

<ion-scroll scrollX="true" direction="x" #scroll1>
    <div class="item" margin *ngFor="let item of newItems"
      (click)="goToItemPage(item)">
      <img src="./assets/imgs/placeholder.png"
        [lazyLoad]="item.photoThumb?.url()"
        [scrollTarget]="scroll1._scrollContent.nativeElement" />
        <div text-center text-wrap>
          <p no-margin>{{ (item.shortName || item.name) | excerpt:17 }}</p>
        </div>
    </div>
  </ion-scroll>
`

[shariajoe]

Hi @fmendoza I have multiple rows where each should be horizontally scrollable and lazy load images
However only visible rows display images on first load.
Scrolling vertically to expose other rows does not trigger image load.
I would like to enable load of these images on vertical scroll of my ion-content and horizontal scroll of my ion-scroll
such that i have it working with two scrollTargets. one for the ion-scroll and the other ion-content
Kindly assist

[d3vtoolsmith]

I've used the below hack to workaround the issue of having a horizontally scrolled list being outside the viewport of the main content's vertical scroll.
In my case, I know that first 2 items of every list are always visible within the main content's vertical scroll, so I connect their scroll container to <ion-content #content>. And the rest of list items are connected to horizontal scroll's <ion-scroll scrollX="true" #recentScroll>.

<ion-content #content>
        <!-- more ion-scrolls here -->
	<ion-scroll #recentScroll scrollX="true">
		<ng-container *ngFor="let subitem of recentItems; let i = index">
			<horizontal-item [item]="subitem" 
                                [scrollContainer]="content._scrollContent.nativeElement" 
                                (openItem)="showItemDetails($event, true)"
			        *ngIf="i < 2"></horizontal-item>
			<horizontal-item [item]="subitem" 
                                [scrollContainer]="recentScroll._scrollContent.nativeElement"
                                (openItem)="showItemDetails($event, true)"
			       *ngIf="i >= 2"></horizontal-item>
		</ng-container>
	</ion-scroll>
        <!-- more ion-scrolls here -->
</ion-content>