Thread: .mCustomScrollbar() Not Working On Body

VERSION WITHOUT ATTEMPT: Untitled Document
VERSION WITH ATTEMPT: Untitled Document


I am using the jQuery custom content scroller of which works on my Quick Access Side Panel you can see via clicking the red square in the top right hand corner of my administration panel however please note I've not yet created a hide function for this. Once you have all dependant files, it is quite simple to give any element a custom scrollbar. For instance, using this on my Quick Access Side Panel;

Code:

$(".content").mCustomScrollbar({
	autoHideScrollbar:true,
	theme:"light-2"
});

My administration panel side navigation, I have it set so it is always at the side of the screen and is therefore only scrollable upon the accordion being larger than the page height. It works hand-in-hand with the main content area and upon the accordion minimized being toggled;

Code:

!function(i) {
	
    var scrollY = 0;
    $(window).scroll(function() {
        var s = $(".SideNav"),
            o = $(this).scrollTop(),
            t = $(window).height() - 42;
        if ($(".Menu").hasClass("Closed")) {
            var e = SideBarExpanded + SideBarExpandedOffset;
            if (e > t) {
                var f = e - t;
                if (o > scrollY) o >= f && s.css({
                    top: 42 - f + o
                }), 42 >= o && s.css({
                    top: 42
                });
                else {
                    var l;
                    l = s.offset().top < 0 ? Math.pow(s.offset().top) : s.offset().top, l > 42 + o && s.css({
                        top: 42 + o
                    })
                }
            } else s.css({
                top: 42 + o
            })
        } else {
            var e = s.height();
            if (s.height() > t) {
                var f = s.height() - t;
                if (o > scrollY) o >= f && s.css({
                    top: 42 - f + o
                }), 42 >= o && s.css({
                    top: 42
                });
                else {
                    var l;
                    l = s.offset().top < 0 ? Math.pow(s.offset().top) : s.offset().top, l > 42 + o && s.css({
                        top: 42 + o
                    })
                }
            } else s.css({
                top: 42 + o
            })
        }
        scrollY = o
    });
	
    i.fn.extend({
        accordion: function() {
            return this.each(function() {
                function i(i, e) {
                    if (!$(".Menu").hasClass("Closed") || $(".Menu").hasClass("Closed") && !$(this).find(".sub-menu").hasClass("first")) e || $(i).toggleClass("Active").parent("li").siblings().find("a").removeClass("Active").parent("li").children("ul").slideUp("fast"), $(i).siblings().slideToggle("fast", function() {
                        SideBarHeight = $(".SideNav").height(), PageHeight = $(window).height(), SideBarExpanded = $(this).height(), SideBarExpandedOffset = $(this).offset().top, SideBarHeight < PageHeight ? $(".Wrapper").css({
                            height: PageHeight - 42 + "px"
                        }) : $(".Wrapper").css({
                            height: SideBarHeight + "px"
                        })
                    });
                    else {
                        e || $(i).toggleClass("Active").parent("li").siblings().find("a").removeClass("Active").parent("li").children("ul").slideUp("fast");
                        $(i).siblings().css({
                            display: "block"
                        })
                    }
                }
                var e = $(this);
                if (e.data("accordiated")) return !1;
                $.each(e.find("ul"), function() {
                    $(this).data("accordiated", !0), $(this).hide()
                }), $.each(e.find("a"), function() {
                    $(this).click(function(e) {
                        return void i(this)
                    })
                });
                var s = $(".Active");
                s && (i(s, "toggle"), $(s).parents().show())
            })
        }
    })
}(jQuery);

I believe it is the above script which will not allow the .mCustomScrollbar() to be applied to the body like so;

Code:

$("body").mCustomScrollbar({
	autoHideScrollbar:true,
	theme:"light-2"
});

How can .mCustomScrollbar() to my pages body?