Tinyscrollbar is loaded before my custom fonts and calculates content height wrong

Question

I use tinyscrollbar.js with custom fonts on my website. The problem that the script executes before the loading of the custom fonts is complete which results in wrong calculation of content height and part of the content is cut down at the end of the scrolling area.

The only solution that i found for this is to load the script using window.load() instead of document.ready() function.

The problem at this solution is that the scrollbar will not work until all the page is loaded including images that is not part of the main content inside the scrolling area.

I thought about using the load event on the fonts url but again there is a font file for each browser, so this will not work either. any help plz.

Answer 1

The best solution i have found for this is to load tinyscrollbar on document ready and update it on window load.

<script type="text/javascript">
   jQuery(document).ready(function() {
        jQuery('#scrollbar1').tinyscrollbar({ sizethumb: 50 });
    });
   jQuery(window).load(function () {
        jQuery('#scrollbar1').tinyscrollbar_update();
    });
</script>