Multiple Scrollers on one page

Hi,

I tried to add multiple horizontal sticky scrollers on one page, and I found that the second scroller is not initializing correctly. I can scroll it fine, but the element that is supposed to be hidden is still showing on the right side.

here is the HTML code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Amy</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

        <!-- Scroller Styles -->
        <link href="scroller.css" rel="stylesheet" type="text/css">

        <!--  Scroller Core Utils -->
        <script defer src="scroller-complete.min.js"></script>

    </head>
<body>

    <div class="scroller-wrapper" style="height: 100px; width: 100px;">
        <div class="scroller">
            <p class="" style="height: 100px; width: 100px;">
                hello
            </p>
            <p class="" style="height: 100px; width: 100px;">
                world
            </p>
            <p class="" style="height: 100px; width: 100px;">
                mang
            </p>
        </div>
    </div>

    <div class="scroller-wrapper" style="height: 100px; width: 100px;">
        <div class="scroller">
            <p class="" style="height: 100px; width: 100px;">
                hello
            </p>
            <p class="" style="height: 100px; width: 100px;">
                world
            </p>
            <p class="" style="height: 100px; width: 100px;">
                mang
            </p>
        </div>
    </div>

<!-- ============================ INITIALIZE ======================= -->
        <script>
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            window.addEventListener('load', function (e) {
                window.scrollerConfig = {
                    disableMouse     : false,
                    useCSSTransition : false,
                    gpuOptimization  : true,
                    infiniteLoading  : false,
                    //hints
                    itemHeight       : 100,
                    itemWidth        : 100,
                    snap             : 'sticky',
                    pullToRefresh    : false,
                    pullToLoadMore   : false,
                    scroll           : 'horizontal',
                    plugins          : ['Endless', 'Snap']
                };

                var scrollerConfig2 = {
                    '//Description' : 'Default scroller with no configuration'
                };

                window.scroller = new Scroller('.scroller-wrapper', scrollerConfig);
                // window.scroller.appendItems("<p style='height: 100px; width: 100px;'>woah</p>");
                new Scroller('.scroller-wrapper2', scrollerConfig);
            });
        </script>
    </body>
</html>

forcedotcom / scrollerjs

Multiple Scrollers on one page #6