我正在使用此网站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);
});
我希望你能帮助我,谢谢!