MagicScroll,我无法在iPad,iPod和iPhone上运行

时间:2014-04-29 03:49:23

标签: jquery ipad mobile scroll

我正在使用此网站http://alvizouri.com/cv/

我使用的是jQuery,MagicScroll和TimeLineMax。这是MagicScroll http://janpaepke.github.io/ScrollMagic/

的链接

我的问题是,在尝试调试(通过safari)MagicScroll之后,我无法弄清楚为什么在iPad,iPod或iPhone上滚动(滑动)不起作用。我真的希望你能帮助我们,非常感谢你们。向我询问任何进一步的信息。

if(Modernizr.touch) {
        var myScroll;
        $(document).ready(function () {
            // wrap for iscroll
            $("#content-wrapper")
                .addClass("scrollContainer")
                .wrapInner('<div class="scrollContent"></div>');

            // init the controller
            controller = new ScrollMagic({
                container: "#content-wrapper",
                globalSceneOptions: {
                    triggerHook: "onLeave"
                }
            });

            // add iScroll
            myScroll = new IScroll('#content-wrapper', {scrollX: false, scrollY: true, scrollbars: true, useTransform: false, useTransition: false, probeType: 3});

            // update container on scroll
            myScroll.on("scroll", function () {
                controller.update();
            });

            // overwrite scroll position calculation to use child's offset instead of parents scrollTop();
            controller.scrollPos(function () {
                return -myScroll.y;
            });

            // refresh height, so all is included.
            setTimeout(function () {
                myScroll.refresh();
            }, 0);

            $("#content-wrapper").on("touchend", "a", function (e) {
                // a bit dirty workaround for links not working in iscroll for some reason...
                e.preventDefault();
                if($(this).hasClass('arrow'))
                    $(this).trigger('click');
                else
                    window.location.href = $(this).attr("href");
            });

            // manual set hight (so height 100% is available within scroll container)
            $(document).on("orientationchange", function () {
            $("section")
                .css("min-height", $(window).height())
                .parent(".scrollmagic-pin-spacer").css("min-height", $(window).height());
            });
            $(document).trigger("orientationchange"); // trigger to init

            document.documentElement.ontouchstart = true;
            document.addEventListener('touchmove',function(e) {
                e.preventDefault();
                var touch = e.touches[0];
                // window.console.log(touch.pageX + " - " + touch.pageY);
            }, false);
            document.addEventListener('touchstart', function(e) {
                e.preventDefault();
                var touch = e.touches[0];
                //This works! But site doesn't scroll
                window.console.log(touch.pageX + " - " + touch.pageY);
            }, false);

        });
    } else {
        // init the controller
        controller = new ScrollMagic({
            globalSceneOptions: {
                triggerHook: "onLeave"
            }
        });
    }

在每个页面中我都有更多代码,每个代码都是这样的:

$(document).ready(function() {
        pin = new TimelineMax()
            .add(TweenMax.from("#homeSlide1", 0.5, {top: "0%", marginTop: 0}))
            .add([
                TweenMax.to("#homeSlide1", 1, {left:'-'+$(window).width()+'px'}),
                TweenMax.to("#homeSlide2", 1, {left:'0px'})
            ])
            .add(TweenMax.to("#homeSlide3", 1, {left:'0px'}))
            .add(TweenMax.to("#homeSlide4", 1, {left:'0px'}))

        scene = new ScrollScene({
            triggerElement: "section#Home",
            duration: $(window).innerHeight()
        })
        .on("progress", function () {})
        .setTween(pin)
        .setPin("section#Home")
        .addTo(controller);
});

我希望你能帮助我,谢谢!

0 个答案:

没有答案