DataTables plug-in - Display scrollbar below tfoot tag?

问题

I use jQuery DataTables plug-in and "scrollX":true for horizontal scrolling.

Why scroll bar appears above tfoot tag? How to make it appear below footer?

var table = $('#example')
    .DataTable(
    {
        "scrollX": true,
        "scrollCollapse": true,
        "dom": 'Zlrtip',
        "colResize": {
            "tableWidthFixed": false,
            //"handleWidth": 10,
            "resizeCallback": function(column)
            {

            }
        },
        "searching":   false,
        "paging":   false,
        "info":     false,
        "deferRender": true,
        "sScrollX": "190%"
    });

See JSFiddle example demonstrating the problem.

回答1:

You need to add the following code to you DataTables initialization options:

"fnInitComplete": function(){
    // Disable TBODY scoll bars
    $('.dataTables_scrollBody').css({
        'overflow': 'hidden',
        'border': '0'
    });

    // Enable TFOOT scoll bars
    $('.dataTables_scrollFoot').css('overflow', 'auto');

    // Sync TFOOT scrolling with TBODY
    $('.dataTables_scrollFoot').on('scroll', function () {
        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
    });                    
},

See updated JSFiddle for demonstration.

回答2:

The solution given by Gyrocode.com is good. But it fails when tested across various devices and browsers. So here is an enhanced version which works on touch devices as well as OS specific browsers.

fnInitComplete: function() {
    var device = getBrowserInfo(),
        horizontalScroll = 0,
        tableElement = $(this[0]),
        scrollBody = $('.dataTables_scrollBody'),
        scrollFoot = $('.dataTables_scrollFoot'),
        maxScrollLeft,
        start = { x:0 , y:0 },
        offset;

    // Compute the maxScrollLeft value
    tableElement.on('draw.dt', function() {
        maxScrollLeft = tableElement.width() - scrollBody.width() + 2;
    });

    // Disable TBODY scoll bars
    scrollBody.css({ 'overflow-x': 'hidden' });

    // Enable TFOOT scoll bars
    scrollFoot.css('overflow-x', 'auto');

    // Sync TFOOT scrolling with TBODY
    scrollFoot.on('scroll', function(event) {
        horizontalScroll = scrollFoot.scrollLeft();
        scrollBody.scrollLeft(horizontalScroll);
    });

    // Enable body scroll for touch devices
    if((device.isAndroid && !device.isChrome) || device.isiPad 
        || (device.isMac && !device.isFF)) {
        // Enable for TBODY scoll bars
        scrollBody.css({ 'overflow-x': 'auto'});
    }

    // Fix for android chrome column misalignment on scrolling
    if(device.isAndroid && device.isChrome) {
        scrollBody[0].addEventListener("touchstart", touchStart, false);
        scrollBody[0].addEventListener("touchmove", touchMove, false);
        scrollFoot[0].addEventListener("touchstart", touchStart, false);
        scrollFoot[0].addEventListener("touchmove", touchMoveFooter, false);                    
    }

    // Fix for Mac OS dual scrollbar problem
    if(device.isMac && device.isFF) {
        scrollBody.on('wheel', function(event) {
            if(Math.abs(event.originalEvent.deltaY) < 3) {
                event.preventDefault();
            }
            performScroll(event.originalEvent.deltaX);
        });
    }

    /*
     * Performs the scroll based on the delta value supplied.
     * @param deltaX {Number}
     */
    function performScroll(deltaX) {
        horizontalScroll = horizontalScroll + deltaX;
        if(horizontalScroll > maxScrollLeft) {
            horizontalScroll = maxScrollLeft;
        } else if(horizontalScroll < 0) {
            horizontalScroll = 0;
        }
        scrollFoot.scrollLeft(horizontalScroll);
    }

    /*
     * Computes the touch start position along with the maximum
     * scroll left position
     * @param e {object}
     */
    function touchStart(e) {
        start.x = e.touches[0].pageX;
        start.y = e.touches[0].pageY;
    }

    /*
     * Computes the offset position and perform the scroll based
     * on the offset
     * @param e {Object}
     */
    function touchMove(e) {
        offset = {};
        offset.x = start.x - e.touches[0].pageX;
        offset.y = start.y - e.touches[0].pageY;
        performScroll(offset.x / 3);
    }

    /*
     * Computes the offset position and perform the scroll based
     * on the offset
     * @param e {Object}
     */
    function touchMoveFooter(e) {
        e.preventDefault();
        touchMove(e);
    }

    /**
     * @getBrowserInfo
     * @description
     * To get browser information
     *
     * @return {Object}
     */
    function getBrowserInfo() {
        return {
            isiPad: (/\(iPad.*os (\d+)[._](\d+)/i).test(navigator.userAgent) === true || navigator.platform.toLowerCase() === 'ipad',
            isAndroid: (/\(*Android (\d+)[._](\d+)/i).test(navigator.userAgent),
            isMac: navigator.platform.toUpperCase().indexOf('MAC') >= 0,
            isChrome: !!window.chrome,
            isFF: !!window.sidebar
        };
    };

}

Also to remove the slim scroll in Mac OS and various other mobile devices add

.dataTables_scrollBody::-webkit-scrollbar {
    display: none;
}

回答3:

I preferred Japheth Adhavan's answer, but it didn't work on Windows, so I modified the code that disables the tbody scroll bars.

// Disable TBODY scroll bars
if (!device.isMac && !device.isAndroid) {
    // for Windows
    scrollBody.css({'-ms-overflow-style': 'none'})
} else {
    scrollBody.css({ 'overflow-x': 'hidden' });
}

Scrolling with the keyboard arrows on Windows was still then very slow, presumably because the tbody scroll listener from DataTables triggered the tfoot scroll listener which triggered the tbody, etc. (see How to Synchronize Scroll Between two windows) When I disabled the DT listener and replaced it with my own, the issue was resolved.

$(scrollBody).off('scroll.DT');

var ignore = false;

// Sync TFOOT scrolling with TBODY
function syncScroll(elA, elB) {

    function scrollLeft(el, position) {
        ignore = true;
        el.scrollLeft(position);
    }

    $(elA).scroll(function() {
        var tmpIgnore = ignore;
        ignore = false;
        if (!tmpIgnore) {
            var scrollPos = $(elA).scrollLeft();
            $(scrollHead).scrollLeft(scrollPos);
            scrollLeft($(elB), scrollPos);
        }
    });
}

syncScroll(scrollBody, scrollFoot);
syncScroll(scrollFoot, scrollBody);

来源：https://stackoverflow.com/questions/30843811/datatables-plug-in-display-scrollbar-below-tfoot-tag