How to customize toolbar scroll step in Angular Toolbar component

22 Sep 20256 minutes to read

The Toolbar component supports customizing the scrolling distance when you click the left and right side navigation icons. You can customize the scrollStep property for scrolling distance. Refer to the following code example.

By using the Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.

<div class="control-section e-tbar-section">
    <div class="e-sample-resize-container">
        <!-- Render the Toolbar Component -->
        <ejs-toolbar id="toolbar" scrollStep="50">
            <e-items>
                <e-item prefixIcon='e-cut-icon tb-icons' tooltipText='Cut'></e-item>
                <e-item prefixIcon='e-copy-icon tb-icons' tooltipText='Copy'></e-item>
                <e-item prefixIcon='e-paste-icon tb-icons' tooltipText='Paste'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bold-icon tb-icons' tooltipText='Bold'></e-item>
                <e-item prefixIcon='e-underline-icon tb-icons' tooltipText='Underline'></e-item>
                <e-item prefixIcon='e-italic-icon tb-icons' tooltipText='Italic'></e-item>
                <e-item prefixIcon='e-color-icon tb-icons' tooltipText='Color-Picker'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-alignleft-icon tb-icons' tooltipText='Align-Left'></e-item>
                <e-item prefixIcon='e-alignright-icon tb-icons' tooltipText='Align-Right'></e-item>
                <e-item prefixIcon='e-aligncenter-icon tb-icons' tooltipText='Align-Center'></e-item>
                <e-item prefixIcon='e-alignjustify-icon tb-icons' tooltipText='Align-Justify'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-bullets-icon tb-icons' tooltipText='Bullets'></e-item>
                <e-item prefixIcon='e-numbering-icon tb-icons' tooltipText='Numbering'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-ascending-icon tb-icons' tooltipText='Ascending'></e-item>
                <e-item prefixIcon='e-descending-icon tb-icons' tooltipText='Descending'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-upload-icon tb-icons' tooltipText='Upload'></e-item>
                <e-item prefixIcon='e-download-icon tb-icons' tooltipText='Download'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-indent-icon tb-icons' tooltipText='Indent'></e-item>
                <e-item prefixIcon='e-outdent-icon tb-icons' tooltipText='Outdent'></e-item>
                <e-item type='Separator'></e-item>
                <e-item prefixIcon='e-clear-icon tb-icons' tooltipText='Clear'></e-item>
                <e-item prefixIcon='e-reload-icon tb-icons' tooltipText='Reload'></e-item>
                <e-item prefixIcon='e-export-icon tb-icons' tooltipText='Export'></e-item>
            </e-items>
        </ejs-toolbar>
        <br/>
    </div>
</div>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewEncapsulation, Inject } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
         ToolbarModule
    ],


standalone: true,
    selector: 'app-container',
    templateUrl: './app.component.html',
    encapsulation: ViewEncapsulation.None
})
export class DefaultToolbarComponent {
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));