jquery.doubleScroll.js它在Google chrome的div顶部显示滚动条，但在safari和firefox上无法显示滚动条

Question

我正在制作带有可调整大小列的水平和垂直长表。 所以我想在表格顶部制作一个滚动条以便于拖动。 我找到了这个插件jqueryDoubleScroll（https://github.com/avianey/jqDoubleScroll），它在Google chrome Web浏览器上运行良好。但无法在Safari和Firefox中显示滚动条。

是否可以在其他浏览器上显示滚动条？

/*
 * @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',
				'height': '20px'
			},
			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"><div class="doubleScroll-scroll"></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);
				$(options.topScrollBarInnerSelector).css("height", "20px");
				$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 ));


	$(document).ready(function() {
	   $('.double-scroll').doubleScroll();
	   $('#sample2').doubleScroll({resetOnWindowResize: true});
	});

            .double-scroll {
                width: 400px;
            }
            #sample2{
                width: 100%;
            }
        

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


        

    </head>
    <body>
		
		<h1>Basic</h1>
		<p>adds the scrollbar on top of the table. you can show it when your mouse pointer over it</p>
        <div class="double-scroll">
            <table border="1">
                <tbody>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                    <tr>
                        <td>AAAAAAAAA</td>
                        <td>BBBBBBBBB</td>
                        <td>CCCCCCCCC</td>
                        <td>DDDDDDDDD</td>
                        <td>EEEEEEEEE</td>
                        <td>FFFFFFFFF</td>
                        <td>GGGGGGGGG</td>
                        <td>HHHHHHHHH</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>