Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs

File Size: 1.16 MB
Views Total: 21065
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs

ScrollTabs is a jQuery plugin to create customizable, dynamic, smart and responsive tabs for wide tab-interface applications that automatic adjust to detect whether scrolling is needed. 

One of the greatest features for jQuery ScrollTabs is that you can have different right-and-left side styling depending on if scrolling is required. 

How to use it:

1. Load the jQuery ScrollTabs plugin's CSS in the head section of the web page.

<link rel="stylesheet" href="css/scrolltabs.css">

2. Load the jQuery library and jQuery ScrollTabs plugin's javascript at the end of the page.

<script src=""></script> 
<script src="js/jquery.scrolltabs.js"></script> 

3. Load the jQuery mousewheel plugin to enable mouse wheel on your scrollable tabs.

<script src="js/jquery.mousewheel.js"></script> 

4. Create tabs for your tabbed interface.

<div id="tabs-demo"> 
<span> Tab 1 </span> 
<span> Tab 2 </span> 
<span> Tab 3 </span> 

5. Call the plugin with default options.


6. Optional settings.


  // Pixel width distance for each scroll click.
  scroll_distance: 300, 

  // Animation time for scrolling in milliseconds. 
  scroll_duration: 300, 

  // Pixel width for the scroll button on the left side.
  left_arrow_size: 26, 

  // Pixel width for the scroll button on the right side.
  right_arrow_size: 26, 

  // Callback function on click. Accpets the click event object as an argument. 
  // The default callback function will change the page to the href in the 'rel' attribute of the item's span tag.
  click_callback: function(e){ 
    var val = $(this).attr('rel');
      window.location.href = val;

7. APIs methods.

  • domObject - Access the DOM Object that this TabSet was created on.
  • addTab(html, position) - Add a tab to the ScrollTabs interface. The new tab is created from the HTML string that you pass to this method. Providing an HTML string provides you with the full flexibility to augment your span tag fully to meet the needs of your specific use-case. Optionally, you may pass a position value, which if not provided will default to placing the new tab as the last tab. The positions are zero-indexed, and the new tab will shift all items at and past the indicated position down one item.
  • removeTabs(jQuerySelector) - Removes all the items that are returned by the jQuery selector string (scoped within this object).
  • clearTabs() - Removes all the items in this ScrollTabs object.
  • destroy() - Destroys the ScrollTabs instance formatting, leaving only the raw HTML contents. This is effectively the opposite of the ScrollTabs initialization.
  • hideTabs(jQuerySelector) - Hide tabs based on the jQuery Selector. This is for situations where you may not want to completely remove a tab, but want to temporarily hide it.
  • showTabs(jQuerySelector) - Shows hidden tabs based on the jQuery Selector.


v2.0.1 (2019-11-08)

  • Removes deprecated jQuery reference

v2.0.0 (2015-06-11)


  • Add image-based example.


  • Some additional documentation, better CSS styling for better backwards-compatability with older browsers.

This awesome jQuery plugin is developed by joshreed. For more Advanced Usages, please check the demo page or visit the official website.