New to Kendo UI for Angular? Start a free 30-day trial

ScrollViewComponent

Represents the Kendo UI ScrollView component for Angular.


@Component({
    selector: 'my-app',
    template: `
      <kendo-scrollview
         [data]="items"
         [width]="width"
         [height]="height"
         [endless]="endless"
         [pageable]="pageable">
        <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 width: string = "600px";
 public height: string = "400px";
 public endless: boolean = false;
 public pageable: boolean = 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' }
 ];
}

Selector

kendo-scrollview

Export Name

Accessible in templates as #kendoScrollViewInstance="kendoScrollView"

Inputs

animate

boolean

Enables or disables the built-in animations (see example). By default, animate is set to true and animations are enabled.

arrows

boolean

Enables or disables the built-in navigation arrows (see example). By default, arrows is set to false and arrows are disabled.

data

Array<any>

Provides the data source for the ScrollView (see example).

endless

boolean

Enables or disables the endless scrolling mode in which the data source items are endlessly looped (see example). By default, endless is set to false and the endless scrolling mode is disabled.

height

string

Sets the height of the ScrollView (see example). By default, the height is not set and you have to explicitly define the height value.

pageable

boolean

Enables or disables the built-in pager (see example). By default, pageable is set to false and paging is disabled.

width

string

Sets the width of the ScrollView (see example). By default, the width is not set and you have to explicitly define the width value.

activeIndex

number

Represents the current item index (see example).

Events

itemChanged

EventEmitter<ItemChangedEvent>

Fires after the current item is changed.

Methods

next

Navigates the ScrollView to the next item.

prev

Navigates the ScrollView to the previous item.