scrollable.distance Number (default: 50)

Sets the scroll amount (in pixels) that the ContextMenu scrolls when the scroll buttons are hovered. Each such distance is animated and then another animation starts with the same distance. If clicking a scroll button, the ContextMenu scrolls by doubling the distance.

Example - applying the scroll buttons of the ContextMenu

<div id="target">Target</div>
<ul id="context-menu">
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

<script>
    $("#context-menu").kendoContextMenu({
        scrollable: {
            distance: 20
        }
    });
</script>