Add horizontal scrollbar to top of WPDataTables

wp_datatables_scrollbar.js

/**
 * Add horizontal scrollbar to TOP of WPDataTables, when scrolling is enabled.
 * Useful if the number of visible rows is large, because otherwise you can't access 
 * the whole table unless you scroll to the very bottom to use the scrollbar.
 */
window.addEventListener('load', function(){
	/**
	 * Add additional horizontal scrollbar to top of an element.
	 * Inserts a "dummy" div above the element that has horizontal scrolling, then syncs scrolling between the two.
	 * * Based on stackoverflow answer: https://stackoverflow.com/a/56952952/835996
	 * @param Element element
	 */
	function DoubleScroll(element) {
		var scrollbar = document.createElement('div');
		scrollbar.appendChild(document.createElement('div'));
		scrollbar.style.overflow = 'auto';
		scrollbar.style.overflowY = 'hidden';
		scrollbar.style.lineHeight = '1px';
		scrollbar.style.clear = 'both';
		scrollbar.classname = 'extra-top-scroll';
		scrollbar.firstChild.style.width = element.scrollWidth+'px';
		scrollbar.firstChild.style.paddingTop = '1px';
		scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
		var running = false;
		scrollbar.onscroll = function() {
			if(running) {
				running = false;
				return;
			}
			running = true;
			element.scrollLeft= scrollbar.scrollLeft;
		};
		element.onscroll = function() {
			if(running) {
				running = false;
				return;
			}
			running = true;
			scrollbar.scrollLeft= element.scrollLeft;
		};
		element.parentNode.insertBefore(scrollbar, element);
	}

	// Initialize on the WPDataTable's wrapping scroll div, for all tables on the page.
	var elements = document.getElementsByClassName('wdtscroll');
	for (var i = 0; i < elements.length; i++) {
		DoubleScroll( elements[i] );
	}

});