All Components

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;
}
In this article