Example for horizontal scrolling ?

[thecritic]

I'd love to have an example or documentation on horizontal scrolling. As far as I know (looking through the issues) there has already been a PR regarding this feature and maybe somebody can quickly write up an example usage scenario without me looking into the code extensively, that would be really appreciated.

This has been a really helpful module to me, hopefully somebody can guide me through the horizontal part, that would make it even better. Thanks a lot.

[orizens]

@emeyekayee - you were the one to add this feature (if i'm not mistaken). do you have an example to share?

[reecedoza]

I am using the horizontal scrolling on my web app and it works and although I want to share... my code is buggy currently as I am trying to cater to mobile users and be able to switch from horizontal to vertical scrolling and vice versa as they switch from portrait to landscape mode so I am currently working on that.

If you want to take a look at it, it is in my home component over at diadoz-1.0 and a working version at diadoz.com

[TCNexmo]

This would be really useful. I got a table where I gotta scroll horizontally 200 columns and vertically 100.

[fettunch]

Hi all,

I have some trouble making the horizontal scroll working in my angular app: "@angular/cli": "~8.3.17" "ngx-infinite-scroll": "^8.0.1"

and hope someone can help me out. I already used the ngx infinite scroll in another component and it's working fine but that one is a vertical one.

what am I missing?

alert.component.css:

.notifiContent{ overflow: scroll; max-height: 150px; table{table-layout:fixed;} td{ white-space:nowrap; text-align: center; }

alert.component.html:

                    `<div class="notifiContent" *ngIf="viewMode != 'alert'">
                    <p *ngIf="dayDates.length == 0">No result found</p>

                    <div *ngIf="renderedMergedTickers.length > 0"
                        infinite-scroll
                        [infiniteScrollDistance]="2"
                        [infiniteScrollThrottle]="50"
                        [infiniteScrollContainer]="selector"
                        [scrollWindow]="false"
                        [horizontal]="true"
                        [fromRoot]="true"
                        (scrolled)="onScroll()">

                    <table>
                        <tbody>
                            <tr class="heads">
                                <td *ngIf="alert.mergedTickers">Date</td>
                                <td  *ngFor="let ticket of alert.mergedTickers" >
                                    <span class="singleTicket"  [ngClass]="{success: ticket.result == 'true', failed: ticket.result == 'false', error: ticket.result != 'true' && ticket.result != 'false'}">
                                        {{ticket.desc}}
                                    </span>
                                </td>
                                <!--td *ngFor="let head of alert.mergedTickers">
                                    <span class="singleTicket" [ngClass]="{success: head.result == 'true', failed: head.result == 'false', error: head.result == 'error'}">{{head.desc}}</span>
                                </td-->
                            </tr>
                            <tr class="spacer"></tr>
                            <tr *ngFor="let dayDate of dayDates" class="custColum">
                                <td>{{dayDate}}</td>
                        
                                <td *ngFor="let t of renderedMergedTickers">
                                    <!--span>{{notifMap[t.symbol+'='+dayDate]}}</span-->
                                    <span *ngIf="notifMap[t.symbol+'='+dayDate]" [ngClass]="{success: notifMap[t.symbol+'='+dayDate]=='true', failed: notifMap[t.symbol+'='+dayDate]=='false', error: !(notifMap[t.symbol+'='+dayDate]=='false' || notifMap[t.symbol+'='+dayDate]=='true')  }">{{notifMap[t.symbol+'='+dayDate]}}</span>
                                    <span *ngIf="!notifMap[t.symbol+'='+dayDate]">-</span>
                                </td>
                        
                            </tr>
                            <!--tr *ngFor="let ticker of updatedNotificationTickers" class="custColum">
                                <td>{{ticker.date | date}}</td>
                                <td *ngFor="let t of ticker?.tickers">
                                    <span *ngIf="t.showResult" [ngClass]="{success: t.result == 'true', failed: t.result == 'false', error: t.result == 'error'}">{{t.result}}</span>
                                    <span *ngIf="!t.showResult">-</span>
                                </td>
                            </tr-->
                        </tbody>
                    </table>
                    </div>

alert.component.ts:

selector: string = '.notifiContent';
  scrollOffset = 80;

  updateNotif(alert: any, i: any) {
.
.
.
      if (this.viewMode != 'alert') {
        console.log("it's notification view");
        this.apiProvider.getNotificationHistory(alert.id).subscribe((response: any) => {
          if (response.dayDates.length > 0) {
            this.dayDates = response.dayDates;
            this.notifMap = response.resultMap;
            this.appendItems(0, this.scrollOffset);
            console.log("alert.mergedTickers:");
            console.log(alert.mergedTickers);
          }
.
.
.
  }

    addItems(startIndex:any, endIndex:any) {
    let newTic = [...this.selectedAlert.mergedTickers];
    this.renderedMergedTickers = newTic.slice(startIndex, endIndex);
    console.log("renderedMergedTickers:"); 
    console.log(this.renderedMergedTickers);
  }

  appendItems(startIndex:any, endIndex:any) {
    this.addItems(startIndex, endIndex);
  }

  onScroll() {
    const start = 0;
    this.scrollOffset += 150;
    this.addItems(start, this.scrollOffset);
  }

[fettunch]

Hi, I see some experts in this thread and I have been checking for the past days but unfortunately I could not find a way to get the horizontal scroll working...is there anyone able to help me? :)

[emeyekayee]

Hi Fabio,

Well, it's been awhile but as I recall the element to which you apply the InfiniteScroll directive also needs to have a 'horizontal=true' attribute. My example looks something like this:

template: `

<div class="scrolling-container" ... infinite-scroll [horizontal]="true" ... >

    ...

  </div>
</div>

`

And if I recall correctly, setting the style/css works better as 'overflow-x: scroll;' than as just 'overflow: scroll;'

Hope that helps, and be well!

• Mike

On Mon, Apr 6, 2020 at 5:25 AM fabio cabrini [email protected] wrote:

Hi, I see some experts in this thread and I have been checking for the past days but unfortunately I could not find a way to get the horizontal scroll working...is there anyone able to help me? :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/orizens/ngx-infinite-scroll/issues/105#issuecomment-609762201, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHRWWNNG7NS35XE34IK5P3RLHC3JANCNFSM4C2QGT5A .