Freeze pane on SharePoint list with responsive scroll height

Earlier I blogged on how-to 'Freeze pane on SharePoint list': augment the standard SharePoint ListView UI to fixate the list header in visible sight when the user scrolls down the list in the browser. The user was totally happy with this delivered solution..., until opening the page on smaller screen (estate)... In the original code, the browser scrollbar is explicit hidden. An non-usability effect is that the user cannot scroll to the lower part in case the configured height of the 'scrollable listview' extends beyond the physical browser height. On the first coding, I made the explicit decision to hide the browser scrollbar via CSS, to avoid double scrollbars: without the CSS "overflow:hidden" property on 's4-workspace', the browser will always render its own scrollbar for pages that initial extend the browser height, even when later via clientside coding the page height is on-the-fly reduced to fit in browser height. The presence of double scrollbars - browser + on the list - is both confusing as non-esthetic. I prevented this via the 'overflow:hidden'.

However, in the initial code I didn't accompensate sufficient for smaller physical screens. I re-evaluated the 'freeze' code, and made some adjustments to make it responsive to the physical screen height. Another fix is to duplicate eventhandling on the standard listview header to the frozen header, for filtering, and 'select/deselect all' functionalities. Yet another fix is in the positioning of the ECB menu: default this is positioned relative to the listview top, which however itself is floating due the 'freeze' handling.

Updated code:

var visibleTableHeight = -1;

// Freeze the header of listview.
function FreezePane() {
    var $table = $(".ms-listviewtable").first().data("summary", "<listview name>");

    var freezedTRHeight = 25;
    // Determine the available height for table to render in visible screen.
    if (visibleTableHeight === -1) {
        var origWorkspaceHeight = $("#s4-workspace").height();
        var origTableHeight = $table.height();
        var spaceInWorkspaceWithoutTable = origWorkspaceHeight - origTableHeight;

        var windowHeight = window.innerHeight;
        if (windowHeight == undefined) {
            windowHeight = document.documentElement.clientHeight;
        }
        var topPos = $("#s4-workspace").offset().top;
    
        var availableHeight = windowHeight - topPos - spaceInWorkspaceWithoutTable - freezedTRHeight;

        // Set visible height, with minimum of 300
        visibleTableHeight = Math.max(availableHeight, 300);
    }

    // WRAP TABLE IN SCROLL PANE
    $("#s4-workspace").css( { 'overflow-y': 'auto' } );

    $table.wrap("
");

    // FROZEN HEADER ROW
    $(".FreezedLV").wrap("<DIV class='FreezedLVContainer' style='position:relative; margin:0px; height:" + (visibleTableHeight + freezedTRHeight) + "px;'></DIV>");
    $("<table id='FreezedTR' class='ms-listviewtable' cellPadding='1' cellSpacing='0'></table>").insertBefore(".FreezedLV");
    $("#FreezedTR").width($table.width() + "px");

    var $origHeader = $("TR.ms-viewheadertr:first", $table);
    var $firstRowTable = $("TR.ms-itmhover:first", $table);
    var $freezeHeader = $origHeader.clone();
    // Propagate computed width of columns of origheader to freezeheader
    $origHeader.children("th").each(function() {
        var width = $(this).width();
        var ownerIndex = $(this).index();
        $($freezeHeader.children("th")[ownerIndex]).width(width + "px");
    });

    var $alignerRow = $firstRowTable.clone();
    $alignerRow.css( { 'visibility' : 'hidden' } );
    $("#FreezedTR").append($alignerRow);
    $("#FreezedTR").wrap("<DIV style='HEIGHT: " + freezedTRHeight + "px;'></DIV>");
    // Visual "hide" the orig header, make sure it still is rendered as otherwise the alignment of 'body' rows is altered
    $origHeader.children("th").each(function() {
        $(this).css( { 'height' : '0px' , 'max-height' : '0px', 'min-height' : '0px' , 'padding-top' : '0px', 'padding-bottom' : '0px' } );
        $(this).find("div").css( { 'height' : '0px' , 'max-height' : '0px', 'min-height' : '0px', 'margin-top' : '0px', 'margin-bottom' : '0px' } );
        $(this).find("input").css( { 'height' : '0px' , 'max-height' : '0px', 'min-height' : '0px' } );
    });
    $origHeader.css( { 'max-height' : '1px', 'visibility' : 'hidden' } );

    // Delegate eventhandlers from the copied+freezed header to the actual header of the listview.
    var $inputFH = $freezeHeader.find("input[title='Select or deselect all items']");
    $inputFH[0].onclick = null;
    $inputFH[0].onfocus = null;
    $table.onmouseover = null;
    $inputFH.click(function() {
       $(this).closest(".FreezedLVContainer").find(".FreezedLV .ms-viewheadertr").find("input[title='Select or deselect all items']").trigger('click');
    });
    $inputFH.focus(function() {
       $(this).closest(".FreezedLVContainer").find(".FreezedLV .ms-viewheadertr").find("input[title='Select or deselect all items']").trigger('focus');
    });
    $("#FreezedTR").mouseover(function() {
       $(this).closest(".FreezedLVContainer").find(".FreezedLV .ms-listviewtable").trigger('mouseover');
    });

    ExecuteOrDelayUntilScriptLoaded(OverloadPositionCtxImg, "core.js");
    Overload__doPostBack();
}

// Need to update/overload positioning of 'ECB' icon as SharePoint standard it is relative positioned towards its direct parent; 
// and due scrolling would become invisible.
function OverloadPositionCtxImg() {
    if ($.prototype.KI_base_PositionCtxImg === undefined) {
        $.prototype.KI_base_PositionCtxImg = PositionCtxImg;
        PositionCtxImg = function(c, b, h) {
            $.prototype.KI_base_PositionCtxImg(c, b, h);
            var a = c.style;
            a.top = (c.parentNode.offsetTop + b.clientTop) + "px";
        };
    }
}

// Overload MicrosoftAjax UpdatePanel function, to restore FreezePane after navigating to another page in the overview.
function Overload_updatePanel() {
    if (Sys.WebForms.PageRequestManager.prototype.KI_base__updatePanel === undefined) {
        Sys.WebForms.PageRequestManager.prototype.KI_base__updatePanel = Sys.WebForms.PageRequestManager.prototype._updatePanel;
        Sys.WebForms.PageRequestManager.prototype._updatePanel = function(updatePanelElement, rendering) {
            Sys.WebForms.PageRequestManager.prototype.KI_base__updatePanel(updatePanelElement, rendering);
            if (updatePanelElement === $(".ms-listviewtable").first().data("summary", "<listview name>").closest("div")[0]) {
                if (("td.ms-addnew").length > 1) $("td.ms-addnew").last().closest("table").hide()
                FreezePane();
            }
        };
    }
}

function Overload__doPostBack() {
    if ($.prototype.KI_base__doPostBack === undefined) {
        $.prototype.KI_base__doPostBack = __doPostBack;
        __doPostBack = function (eventTarget, eventArgument) {
           // Make sure to overload the updatePanel function before postback from navigate button.
           if ($.prototype.KI_base__updatePanel === undefined) Overload_updatePanel();
           $.prototype.KI_base__doPostBack(eventTarget, eventArgument);
       }
    }
}