malihu / malihu-custom-scrollbar-plugin

Highly customizable custom scrollbar jQuery plugin, featuring vertical/horizontal scrollbars, scrolling momentum, mouse-wheel, keyboard and touch support etc.
http://manos.malihu.gr/jquery-custom-content-scroller
MIT License
4.11k stars 1.51k forks source link

mCustomscrollbar is not working in JQuery 3.6.0 #663

Open Praveen-raj27 opened 3 years ago

Praveen-raj27 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

showdev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

Yes, in _pluginMarkup replace all " />" for ">

" and in _scrollButtons replace " />" for ">" you can do this directly in minified file

gethari commented 2 years ago

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