Using iScroll within a Fancybox

Question

I'm trying to use iScroll 4 within a Fancybox but with no joy.

iScroll attaches to the content, and you can push it with your finger to make it scroll, but when you let go it bounces back. It's behaving as it does when the content fits within its container.

Answer 1

The solution is to call refresh() on your iScroll object immediately after the Fancybox appears:

$("#about-button").fancybox({
    onComplete: function () {
       my_iscroll.refresh();
    }
});

The recommended way to use Fancybox is to hide your content in a <div style='display:none'> or similar, but that prevents the browser from performing any layout on it, and hence prevents iScroll from knowing how big it is.