Question

I’m using SmoothDivScroll and it was working great until I tried to load all the JS files asynchronously. I use my own async loading pattern using Ryan Grove’s Lazyload.js but to be sure, I also tested with Modernizr‘s load/complete pattern and got the same result. I tested with a copy of the quick demo part from SmoothDivScroll’s homepage and just added Modernizr. Without Modernizr, it was fine, but when I added Modernizr and its load/complete pattern to the head, and commented out all the JS before the end body tag, it wasn’t working anymore. When you hover over the right arrow nothing happens, while hovering over the left causes the images to flicker. It should work the same either way. The Moderizr block should be equivalent to all the ones below it:

    <script type="text/javascript"> 
        Modernizr.load([ {
            load: [
                '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js',
                '/js/jquery-ui-1.8.23.custom.min.js',
                '/js/jquery.mousewheel.min.js',
                '/js/jquery.kinetic.js',
                '/js/jquery.smoothdivscroll-1.3-min.js'
            ],
            complete: 
                function () {     
                  $(document).ready(function () {
                        $("#makeMeScrollable").smoothDivScroll({
                            mousewheelScrolling: "allDirections",
                            manualContinuousScrolling: true,
                            autoScrollingMode: "onStart"
                        });
                    });
                }
            }
        ]); 
    </script>        

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
    <script src="/js/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="/js/jquery.kinetic.js" type="text/javascript"></script>
    <script src="/js/jquery.smoothdivscroll-1.3-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#makeMeScrollable").smoothDivScroll({
                mousewheelScrolling: "allDirections",
                manualContinuousScrolling: true,
                autoScrollingMode: "onStart"
            });
        });
    </script>

Answer 1

I have modified a code segment as below

      complete: 
            function () {     
                  $("#makeMeScrollable").smoothDivScroll({
                        mousewheelScrolling: "allDirections",
                        manualContinuousScrolling: true,
                        autoScrollingMode: "onStart"
                  });
            }
        }

Attaching ready event handler to the document on complete of Modernizr won’t work as the document is already loaded and parsed by the browser.