mCustomscrollbar is not working in JQuery 3.6.0

[Praveen-raj27]

I have updated my JQuery to latest version (3.6.0). After updating the jquery, mCustomScrollbar is not working. I also update the mCustomScrollbar to version (3.1.5). Still it is not working. The mCustomscrollbar is works fine with JQuery 3.3.1. Can anybody helps to resolve this issue?

[thomasPierreATECNA]

this is iso to https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/651

i fix it like that :

function bugFix(scrollbar) {
	const draggerRail = $(scrollbar).find(".mCSB_draggerRail");
	const draggerContainer = $(scrollbar).find(".mCSB_draggerContainer");
	if (draggerRail.length > 0 && draggerRail.parent().hasClass("mCSB_dragger")) {
		draggerContainer.append(draggerRail);
	}
}

$(#my-element).mCustomScrollbar({
    axis: "y",
    theme: "dark",
    callbacks: {
        onInit: () => bugFix(this)
    }
});

[jiniC]

I have sent pr to solve this problem fundamentally : https://github.com/malihu/malihu-custom-scrollbar-plugin/pull/666

[showdev]

You can use jquery-migrate plugin with jQuery.UNSAFE_restoreLegacyHtmlPrefilter() or restore the functionality by extending your instance of jQuery manually;

The root cause is described here in Security Fix chapter

[codeyapmak]

go to jquery.mCustomScrollbar.js file and find the method _pluginMarkup, there is array scrollbar that hold the html, notice that few div's are closed like <div ..... /> so you need to replace the closing tags properly like <div .....>

[fullhugo]

Yes, in _pluginMarkup replace all " />" for ">" and in _scrollButtons replace " />" for ">" you can do this directly in minified file

[gethari]

this is iso to #651

i fix it like that :

function bugFix(scrollbar) {
	const draggerRail = $(scrollbar).find(".mCSB_draggerRail");
	const draggerContainer = $(scrollbar).find(".mCSB_draggerContainer");
	if (draggerRail.length > 0 && draggerRail.parent().hasClass("mCSB_dragger")) {
		draggerContainer.append(draggerRail);
	}
}

$(#my-element).mCustomScrollbar({
    axis: "y",
    theme: "dark",
    callbacks: {
        onInit: () => bugFix(this)
    }
});

Thank you so much @thomasPierreATECNA