iScroll refresh not working when displaying a ul

Question

Building an App for a publication. For the table of contents I have a simple dropdown, that initially hides the unordered list with the sections, and on 'tap' the corresponding ul will display. Im using iScroll and when an ul is shown the scrolling is broke and has the bounce effect, which doesn't allow you to scroll down or up. I'm using jqt.bars.js also, which pulls in iScroll and init it. I understand iScroll has the refresh method which gets the new height of the container, allowing you to scroll correctly. I can't get it to work right.

Here is my jQuery/JS

var myScroll;

function createIScroll(){
myScroll = new iScroll('div#chapters div.sections-contents');
console.log('createIScroll');
}

function iScrollRefresh(){
setTimeout(function(){
           myScroll.refresh();
           }, 300);
console.log('refresh iScroll');
}

//CHAPTERS DROPDOWN

$(function() {
var chapter = $('ul#nav a.chapter-title');
var sections = $('ul#nav li ul');
sections.hide();
chapter.addClass('chapter-active');
$(chapter).on('tap', function() {
sections.slideUp();

chapter.removeClass('chapter-highlighted').addClass('chapter-active');

if( !$(this).next().is(":visible") ){
  $(this).removeClass('chapter-active').addClass('chapter-highlighted');
  $(this).next().slideDown(200);
  console.log("slidedown");

            iScrollRefresh();
  }

  });

Answer 1

Add refresh to the callback of slideDown:

$(this).next().slideDown(200, function() {
    iScrollRefresh();
});