jqDoubleScroll
jqDoubleScroll copied to clipboard
Added new option to customize scrollbar show
The option is needed because you might want to show scrollbars under table header (this was needed in my case). I might create a ticket too if necessary, to make it as an issue.
Simplified jsfiddle with modified jqDoubleScroll: https://jsfiddle.net/adrwxgvo/10/
Example:
- create an empty row after table header (only one time):
if ($('.empty-inner-table-scroll').length === 0) {{ // only add empty row only once
$('#[Table Header Id]').after('<tr><td class="empty-inner-table-scroll" colspan="42"></td></tr>'); // colspan is better calculated properly, if possible; if not, any number greater than actual number of columns might work (with performance issues sometimes)
- customize showing the scrollbar in order to show under table header:
customizeAfterShowFunction: function(e, self, options) {
var wrapperScrollbarElement = $(options.topScrollBarWrapperSelector); // '.doubleScroll-scroll-wrapper'
var emptyRowElement = $('.empty-inner-table-scroll');
if (wrapperScrollbarElement.length !== 0) {
// make empty row the size of the scrollbar wrapper (because the scrollbar will be on top of the empty row later)
emptyRowElement.height(wrapperScrollbarElement.height());
// move wrapper scrollbar element on top of empty row (under header)
wrapperScrollbarElement.css('position', 'absolute !important'); // needed to be able to move the element
var tableElement = $('table#[Table Id]'); // optional, if scrollbar is needed exactly on the table border, positioned exactly like the bottom scrollbar (with no offset difference between them on x axis)
var offset = emptyRowElement.offset();
offset.left = offset.left
- parseInt(tableElement.css('border-left-width'), 10)
- parseInt(tableElement.css('margin-left'), 10)
- parseInt(tableElement.css('padding-left'), 10);
wrapperScrollbarElement.offset(offset);
// scrollbar on top of readonly divs with z-index 1000 (in my case) to be able to scroll readonly grids too (with both scrollbars)
wrapperScrollbarElement.css('z-index', '1001');
// refresh inner scrollbar element width to make scrolls size equal (this is needed in other places too, in case the table size changes)
var innerScrollbarElement = $(options.topScrollBarInnerSelector); // '.doubleScroll-scroll'
if (innerScrollbarElement.lenght !== 0 && tableElement.length !== 0)
innerScrollbarElement.width(tableElement.outerWidth());
} else {
// if the wrapper element doesn't exist, the empty row must be hidden (height zero works too)
emptyRowElement.height(0);
}
}