Endless Scrolling

The ScrollView provides a scrolling mode which loops through its views in an endless fashion.

To enable or disable the endless scrolling functionality, set the endless property. By default, endless is set to false and the endless scrolling mode is disabled.

@Component({
  selector: 'my-app',
  template: `
  <div class="example-config">
    <input id="endless" type="checkbox" [(ngModel)]="endless" />
    <label for="endless">Enable Endless Scrolling Mode</label>
  </div>
  <kendo-scrollview
    [data]="items"
    [width]="width"
    [height]="height"
    [arrows]="true"
    [endless]="endless">
      <ng-template let-item="item">
          <h2 class="demo-title">{{item.title}}</h2>
          <img src='{{item.url}}' alt='{{item.title}}' [ngStyle]="{minWidth: width}" draggable="false" />
      </ng-template>
  </kendo-scrollview>
  `,
  styles: [`
    .k-scrollview-wrap {
      margin: 0 auto;
    }
    .demo-title {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0;
      padding: 15px;
      color: #fff;
      background-color: rgba(0,0,0,.4);
      text-align: center;
      font-size: 24px;
    }
  `]
})
class AppComponent {
public items: any[] = [
    { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
    { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
    { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
];
public width: string = "100%";
public height: string = "400px";
public endless: boolean = false;
}

Automatic Endless Scrolling

To implement an automatic endless scrolling, use the next method of the ScrollView, wrapped in a setInterval callback.

import { Component, ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
        <kendo-scrollview
            #sv
            [data]="items"
            [width]="width"
            [height]="height"
            [arrows]="true"
            [endless]="true"
        >
            <ng-template let-item="item">
            <h2 class="demo-title">{{ item.title }}</h2>
            <img
                src="{{ item.url }}"
                alt="{{ item.title }}"
                [ngStyle]="{ minWidth: width }"
                draggable="false"
            />
            </ng-template>
        </kendo-scrollview>
        <button class="k-button" (click)="paused = !paused">
            {{ paused ? "Resume" : "Pause" }}
        </button>
    `,
    styles: [`
        .k-scrollview-wrap {
            margin: 0 auto;
        }
        .demo-title {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0;
            padding: 15px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.4);
            text-align: center;
            font-size: 24px;
        }
    `]
})
export class AppComponent implements OnDestroy, AfterViewInit {
    @ViewChild('sv') private scrollView;
    public paused = false;
    public items: any[] = [
        { title: 'Flower', url: 'https://bit.ly/2cJjYuB' },
        { title: 'Mountain', url: 'https://bit.ly/2cTBNaL' },
        { title: 'Sky', url: 'https://bit.ly/2cJl3Cx' }
    ];
    public width = '100%';
    public height = '500px';
    private interval;

    public ngAfterViewInit() {
        this.interval = setInterval(() => {
            if (!this.paused) {
                this.scrollView.next();
            }
        }, 3000);
    }

    public ngOnDestroy() {
        clearInterval(this.interval);
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollViewModule } from '@progress/kendo-angular-scrollview';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ScrollViewModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article