| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- /*
- * @name DoubleScroll
- * @desc displays scroll bar on top and on the bottom of the div
- * @requires jQuery
- *
- * @author Pawel Suwala - http://suwala.eu/
- * @author Antoine Vianey - http://www.astek.fr/
- * @version 0.5 (11-11-2015)
- *
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- *
- * Usage:
- * https://github.com/avianey/jqDoubleScroll
- */
- (function( $ ) {
-
- jQuery.fn.doubleScroll = function(userOptions) {
-
- // Default options
- var options = {
- contentElement: undefined, // Widest element, if not specified first child element will be used
- scrollCss: {
- 'overflow-x': 'auto',
- 'overflow-y': 'hidden'
- },
- contentCss: {
- 'overflow-x': 'auto',
- 'overflow-y': 'hidden'
- },
- onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
- resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
- timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
- };
-
- $.extend(true, options, userOptions);
-
- // do not modify
- // internal stuff
- $.extend(options, {
- topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
- topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
- topScrollBarInnerSelector: '.doubleScroll-scroll'
- });
- var _showScrollBar = function($self, options) {
- if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
- // content doesn't scroll
- // remove any existing occurrence...
- $self.prev(options.topScrollBarWrapperSelector).remove();
- return;
- }
-
- // add div that will act as an upper scroll only if not already added to the DOM
- var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);
-
- if ($topScrollBar.length == 0) {
-
- // creating the scrollbar
- // added before in the DOM
- $topScrollBar = $(options.topScrollBarMarkup);
- $self.before($topScrollBar);
- // apply the css
- $topScrollBar.css(options.scrollCss);
- $self.css(options.contentCss);
- // bind upper scroll to bottom scroll
- $topScrollBar.bind('scroll.doubleScroll', function() {
- $self.scrollLeft($topScrollBar.scrollLeft());
- });
- // bind bottom scroll to upper scroll
- var selfScrollHandler = function() {
- $topScrollBar.scrollLeft($self.scrollLeft());
- };
- $self.bind('scroll.doubleScroll', selfScrollHandler);
- }
- // find the content element (should be the widest one)
- var $contentElement;
-
- if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
- $contentElement = $self.find(options.contentElement);
- } else {
- $contentElement = $self.find('>:first-child');
- }
-
- // set the width of the wrappers
- $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
- $topScrollBar.width($self.width());
- $topScrollBar.scrollLeft($self.scrollLeft());
-
- }
-
- return this.each(function() {
-
- var $self = $(this);
-
- _showScrollBar($self, options);
-
- // bind the resize handler
- // do it once
- if (options.resetOnWindowResize) {
-
- var id;
- var handler = function(e) {
- _showScrollBar($self, options);
- };
-
- $(window).bind('resize.doubleScroll', function() {
- // adding/removing/replacing the scrollbar might resize the window
- // so the resizing flag will avoid the infinite loop here...
- clearTimeout(id);
- id = setTimeout(handler, options.timeToWaitForResize);
- });
- }
- });
- }
- }( jQuery ));
|