javascript - jquery 滚动效果不适用于 iphone

Question

jQuery 代码似乎无法在 iphone 上运行。只有“titleEffect”功能有效。除此之外，我的 iPhone 屏幕上没有显示任何其他内容，safari 上没有，甚至 chrome 上也没有。有什么想法吗？？？？

到目前为止，我发现 if/else 语句的所有“else”部分都有效。

当页面向下滚动到每个内容时，我想让内容显示在屏幕上。在我的电脑上一切正常，即使在安卓上也是如此。只有 iphone 不工作。

$(document).ready(function(){
	
	
	$("#welcome h3").fadeIn(4000);
	
	// deal with the page getting resized or scrolled
	window.onscroll = function() {updateEffect()};
	window.onresize = function() {updateEffect()};
 
	function updateEffect() {
		// add your code to update the position when your browser
		// is resized or scrolled
		titleEffect();
		slideUpShow("#image1 img");
		slideUpShow("#image2 img");
		slideLeftShow("#image1 div");
		slideLeftShow("#image2 div");
		slideRightShow("#social-links-div p:nth-child(1)");
		slideLeftShow("#social-links-div p:nth-child(2)");
		slideRightShow(	"#social-links-div p:nth-child(3)");
		minimizeShow(".video-div");
	}

	function titleEffect(){
		for(var x=0; x<($("#welcome").height()/3*2);x+=10){
			if(document.body.scrollTop > x || document.documentElement.scrollTop > x){
				$("#welcome h1").css('margin-top', x);
			}
		}
	}
	
	function getPosition(content){
		var x = $(content).position().top;
		return x;
	}
	
	function slideUpShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideUpIn");
		} else {
			$(id).removeClass("slideUpIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function slideLeftShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideLeftIn");
		} else { 
			$(id).removeClass("slideLeftIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function slideRightShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("hide");
			$(id).addClass("show");
			$(id).addClass("slideRightIn");
		} else {
			$(id).removeClass("slideRightIn");
			$(id).removeClass("show");
			$(id).addClass("hide");
		}
	}
	
	function minimizeShow(id){
		if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5){ 
			$(id).removeClass("zoomOut");
			$(id).addClass("zoomIn");
		} else {
			$(id).removeClass("zoomIn");
			$(id).addClass("zoomOut");
		}
	}
	
});//document ready ends

Answer 1

document.documetElement.scrollTop Iphone 中的函数不返回当前滚动。

代替这种用法:

$('body').scrollTop()

在您使用此方法的所有地方。