Toolbar supports to customize the scrolling distance when you click the left and right side navigation icons. we can customize ScrollStep
property for scrolling distance. Refer to the following code example.
//Initialize Toolbar component
var toolbar = new ej.navigations.Toolbar({
scrollStep: 50,
width: 600,
items: [
{
prefixIcon: 'e-cut-icon', tooltipText: 'Cut' },
{
prefixIcon: 'e-copy-icon', tooltipText: 'Copy' },
{
prefixIcon: 'e-paste-icon', tooltipText: 'Paste' },
{
type: 'Separator' },
{
prefixIcon: 'e-bold-icon', tooltipText: 'Bold' },
{
prefixIcon: 'e-underline-icon', tooltipText: 'Underline' },
{
prefixIcon: 'e-italic-icon', tooltipText: 'Italic' },
{
prefixIcon: 'e-color-icon', tooltipText: 'Color-Picker' },
{
type: 'Separator' },
{
prefixIcon: 'e-alignleft-icon', tooltipText: 'Align-Left' },
{
prefixIcon: 'e-alignjustify-icon', tooltipText: 'Align-Justify'},
{
prefixIcon: 'e-alignright-icon', tooltipText: 'Align-Right' },
{
prefixIcon: 'e-aligncenter-icon', tooltipText: 'Align-Center' },
{
type: 'Separator' },
{
prefixIcon: 'e-bullets-icon', tooltipText: 'Bullets'},
{
prefixIcon: 'e-numbering-icon', tooltipText: 'Numbering' },
{
type: 'Separator' },
{
prefixIcon: 'e-ascending-icon', tooltipText: 'Sort A - Z' },
{
prefixIcon: 'e-descending-icon', tooltipText: 'Sort Z - A' },
{
type: 'Separator' },
{
prefixIcon: 'e-upload-icon', tooltipText: 'Upload' },
{
prefixIcon: 'e-download-icon', tooltipText: 'Download' },
{
type: 'Separator' },
{
prefixIcon: 'e-indent-icon', tooltipText: 'Text Indent' },
{
prefixIcon: 'e-outdent-icon', tooltipText: 'Text Outdent' },
{
type: 'Separator' },
{
prefixIcon: 'e-clear-icon', tooltipText: 'Clear' },
{
prefixIcon: 'e-reload-icon', tooltipText: 'Reload' },
{
prefixIcon: 'e-export-icon', tooltipText: 'Export'
}]
});
//Render initialized Toolbar component
toolbar.appendTo('#element');
function beforeCreate(e) {
e.scrollStep = 50;
}
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toolbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Toolbar Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
<br>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-tbar-btn .e-icons {
font-family: 'Material_toolbar';
font-size: 16px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}