mCustomScrollBar "scrollTo, divID" not working

Question

I seem to be having a problem scrolling to an element using the ".mCustomScrollbar("scrollTo",divID)" function.

I have a div (id="#wrapper") containing a lot of divs (anything up to 800 divs of height each 20px).

I then add the mCustomScrollbar to this #wrapper div to use its custom scrollbar functionality like so:

$("#wrapper").mCustomScrollbar();

Now I have a large scrollable div containing a "list-like" structure of divs, not an actual list, just divs stacked on top of each other like a list.

Elsewhere on my page I have a button containing the id of a div element inside the "#wrapper" div, when I click this button I wish to scroll the div element into view, this is my current attempt:

var divID = 'div[id^=' + clickedID +']';

$('#wrapper').mCustomScrollbar("scrollTo",divID);

This function claims to scroll the "divID" into view within the #wrapper div and it does however the problem I have is that it sometimes takes 2 - 4 calls of the "scrollTo" function before the "divID" comes into view.

Can somebody please help me understand why "divID" does not scroll into view on the first call of the "scrollTo" function and how I might get it to work as I expect?

Kind Regards

Answer 1

I know I'm a little late, but maybe I can help You (Or some one that fall here)...

I had the very same issue. Wanna scroll to a selected item in the list (the li with class selected), and solved passing only the pixel I want to scroll for.

Some thing like:

var objPixelScrollIntoView = $('#myObjToScrollIntoView')[0].offsetTop;
$('#myDivSetWith_mCustomScrollbar').mCustomScrollbar("scrollTo", objPixelScrollIntoView);

Or, specifically to Your case:

var objDivPosition = $('div#' + clickedID)[0].offsetTop;  // The 'div' before '#' is not necessary, but I want to keep some reference to Your selector
$('#wrapper').mCustomScrollbar("scrollTo", objDivPosition);