scrollable Boolean|Object (default: true)

If enabled, the TabStrip will display buttons that will scroll the tabs horizontally, when they cannot fit the TabStrip width. By default scrolling is enabled.

The feature requires "top" or "bottom" tabPosition.

Unless disabled, scrollable must be set to a JavaScript object, which represents the scrolling configuration.

See Scrollable Tabs for more information.

Example - disable scrolling

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: false
    });
</script>

scrollable.distance Number (default: 200)

Sets the scroll amount (in pixels) applied when the user clicks on a scroll button.

Example

<div id="tabstrip">
    <ul>
        <li>Tab Header Number 1</li>
        <li>Tab Header Number 2</li>
        <li>Tab Header Number 3</li>
        <li>Tab Header Number 4</li>
        <li>Tab Header Number 5</li>
        <li>Tab Header Number 6</li>
    </ul>
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
    <div>Content 5</div>
    <div>Content 6</div>
</div>
<script>
    $("#tabstrip").kendoTabStrip({
        scrollable: {
            distance: 30
        }
    });
</script>