https://www.vitamind.net/wp-content/themes/networktheme/js/doublescroll.js?ver=1.0.0

1jQuery.fn.doubleScroll = function(userOptions) {
2	var $ = jQuery;
3	// Default options
4	var options = {
5		contentElement: undefined, // Widest element, if not specified first child element will be used
6		scrollCss: {                
7			'overflow-x': 'auto',
8			'overflow-y': 'hidden'
9        },
10		contentCss: {
11			'overflow-x': 'auto',
12			'overflow-y': 'hidden'
13		},
14		onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
15		resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
16		timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
17	};
18	$.extend(true, options, userOptions);
19	// do not modify
20	// internal stuff
21	$.extend(options, {
22		topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
23		topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
24		topScrollBarInnerSelector: '.doubleScroll-scroll'
25	});
26	
27	var _showScrollBar = function($self, options) {
28		
29		if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
30			// content doesn't scroll
31	    	// remove any existing occurrence...
32			$self.prev(options.topScrollBarWrapperSelector).remove();
33			return;
34		}
35		
36	    // add div that will act as an upper scroll only if not already added to the DOM
37	    var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
38	    if ($topScrollBar.length == 0) {
39	    	
40	    	// creating the scrollbar
41	    	// added before in the DOM
42	    	$topScrollBar = $(options.topScrollBarMarkup);
43		    $self.before($topScrollBar);
44		    
45		    // apply the css
46		    $topScrollBar.css(options.scrollCss);
47		    $self.css(options.contentCss);
48
49		    // bind upper scroll to bottom scroll
50		    $topScrollBar.bind('scroll.doubleScroll', function() {
51		    	$self.scrollLeft($topScrollBar.scrollLeft());
52		    });
53
54		    // bind bottom scroll to upper scroll
55		    var selfScrollHandler = function() {
56		        $topScrollBar.scrollLeft($self.scrollLeft());
57		    };
58		    $self.bind('scroll.doubleScroll', selfScrollHandler);
59	    }
60
61	    // find the content element (should be the widest one)	
62		var $contentElement;		
63	    if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
64	        $contentElement = $self.find(options.contentElement);
65	    } else {
66	        $contentElement = $self.find('>:first-child');
67	    }
68	    
69	    // set the width of the wrappers
70	    $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
71	    $topScrollBar.width($self.width());
72        $topScrollBar.scrollLeft($self.scrollLeft());
73	    
74	}
75	
76	return this.each(function() {
77		var $self = $(this);
78		_showScrollBar($self, options);
79	    
80	    // bind the resize handler 
81		// do it once
82	    if (options.resetOnWindowResize) {
83	    	var id;
84	    	var handler = function(e) {
85	    		_showScrollBar($self, options);
86	    	};
87	    	$(window).bind('resize.doubleScroll', function() {
88    			// adding/removing/replacing the scrollbar might resize the window
89    			// so the resizing flag will avoid the infinite loop here...
90	    	    clearTimeout(id);
91	    	    id = setTimeout(handler, options.timeToWaitForResize);
92	    	});
93	    }
94	});
95}