Absolute Positioned Elements Don't Expand Height

[darkfrog26]

Without the custom scrollbar enabled everything works fine, but when I try to set it on my body element the content clips at the end of the static positioned elements and all of my absolute positioned elements it cut off. This plugin needs to be able to support absolute positioned elements adjusting the height of the area as well.

[malihu]

Indeed, this is currently a plugin limitation. I can really say when a fix for such situations will be implemented within the script (I'll try for the next versions) as the solution might be a bit complicated.

For now, you can use plugin's callbacks to set content height dynamically. For example:

$("body").mCustomScrollbar({
    callbacks:{
        onInit:function(){
            this.mcs.content.css("height",this.mcs.content[0].scrollHeight);
            $(this).mCustomScrollbar("update");
        }
    }
});

If your page contains elements that are toggled, resized, etc. via javascript, you'll also need to use the updateOnSelectorChange option and onSelectorChange callback like this:

$("body").mCustomScrollbar({
    advanced:{ updateOnSelectorChange:true },
    callbacks:{
        onInit:function(){
            this.mcs.content.css("height",this.mcs.content[0].scrollHeight);
            $(this).mCustomScrollbar("update");
        },
        onSelectorChange:function(){
            this.mcs.content.css("height","auto").css("height",this.mcs.content[0].scrollHeight);
        }
    }
});

Hope this helps

[darkfrog26]

You might be interested in coupling the functionality here:

https://github.com/sdecima/javascript-detect-element-resize

with a function like:

function getPageHeight() {
    function getUpdatedHeight(element, originalMaxHeight) {
        var top = element.offset().top;
        if(typeof(top)!='undefined'){
            var height = element.outerHeight();
            return Math.max(originalMaxHeight, top+height);
        } else {
            return originalMaxHeight;
        }
    }

    var maxhrel = 0;
    // in IE and chrome, the outerHeight of the html and body tags seem to be more like the window height
    $('body').children(":not(script)").each(function(){ //get all body children
        maxhrel=getUpdatedHeight($(this), maxhrel);
    });

    var atotoffset=0;  // absolute element offset position from the top
    $.each($('body *:not(script)'),function(){   //get all elements
        if ($(this).css('position') == 'absolute'){ // absolute?
            atotoffset=getUpdatedHeight($(this), atotoffset);
        }
    });

    return Math.max(maxhrel, atotoffset);
}

The code snipped you gave me doesn't seem to help.

[malihu]

If you could send me link with your page I might be able to check/modify the snippet to make it work.

[eiranix]

@malihu I was having a similar issue and your post above fixes it. But if the container is too big for a scrollbar on page load it will cause the error: this.mcs is undefined. Do you know how to get round this?

[pruthvip]

@malihu Even I am getting the same error. Anything i might be missing

[hopana]

If you could send me link with your page I might be able to check/modify the snippet to make it work.

I have the same problem as Matt Hicks, you can try to make aceadmin left sidebar autoscroll with this plugin, site: https://github.com/bopoda/ace http://ace.jeka.by