jqDoubleScroll icon indicating copy to clipboard operation
jqDoubleScroll copied to clipboard

Added new option to customize scrollbar show

Open alexandruchirita4192 opened this issue 2 years ago • 0 comments

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);
    }
}

alexandruchirita4192 avatar Oct 05 '21 06:10 alexandruchirita4192