Failed to update jQuery mCustomScrollbar

Question

I use a custom scrollbar from http://manos.malihu.gr/jquery-custom-content-scroller/ .

I use it in a div that contains a gridview. when a new row is added to the gridview and exceeds the size, the scroll bars are not displayed.

and i have one more problem. There is a div inside, and I use the button to switch the display of this div.

I can not update the scroll bar

(function($) { $(window).load(function() { $("#rightFixed").mCustomScrollbar({ scrollInertia: 150, autoHideScrollbar: true, updateOnBrowserResize: true, updateOnContentResize: true, theme: "dark-2" }); }); })(jQuery); $(function () { $("#showTax").click(function () { $("#cartTaxDiv").slideToggle(); $(this).text($(this).text() == 'Show Tax' ? 'Hide Tax' : 'Show Tax'); $('#rightFixed').mCustomScrollbar("update"); }); }); 

One scrollbar initialization event is in $(window).load , and the Click button is in $(document).ready .

Can you help me?

Answer 1

I figured out a solution.

for slideToggle, all we need to do is put Update in a function and call it in switch mode. those. call the function when the switch is completed.

 function updateScrollbar() { $('#rightFixed').mCustomScrollbar("update"); } $("#showTax").click(function () { $("#cartTaxDiv").slideToggle(updateScrollbar); // Call the update Scrollbar after the sliding is done. $(this).text($(this).text() == 'Show Tax' ? 'Hide Tax' : 'Show Tax'); }) 

So, the Toggle problem is solved.

Transition to the second problem - GridView. When the GrodView is updated, the scroll bar should be updated. Therefore, for this, we must call this function at each postback. I do not use the update panel here, so I will call this function if postback in pageload.

 if (IsPostBack) { Page.ClientScript.RegisterStartupScript(this.GetType(), "myscript", "updateScrollbar();", true); } 

Consequently, the problems are resolved.