scrollTop为firefox中的div返回更小的值

Question

嗨，伙计们， 首先，如果这是重复的，请耐心等待，因为我找到的任何类似问题都没有得到解答。

参考链接：http://old.crazyripples.com/?debug=1

所以，我正在使用jQuery和jQuery fullPage插件。它帮助我实现逐帧滚动。

现在，对于垂直高度大于窗口高度的内部div我已经使用了一些函数，我只是检查滚动条位置和 stopPropagation 到插件，以便内部滚动条滚动而不移动框架。

所有这些都适用于镀铬，因为我使用铬制作，我使用了一些我在铬上观察到的计算。但是firefox显示了不同的结果，尤其是使用scrollTop 。

我知道高度可能存在差异，但如果您看到参考链接中的日志，您将看到，高度几乎相同（即使它不适合您， scrollTop值是一个问题）。

以下是我用来决定是否停止传播的代码。

＆＃13;

＆＃13;

$(document).on("keydown",function(e){
	var story=$("#story"),
		story_con=story.find(".container"),
		story_top=story_con.scrollTop();

	if(story.hasClass("active")){
		// console.log(story_top,story_con.height(),story_con.innerHeight(),story_con.children("div").height(),story_con.children("div").innerHeight(),e.which);
		console.log("Div ScrollTop: "+story_top, "Container Height: "+story_con.height(), "Container InnerHeeight: "+story_con.innerHeight(),"Conatiner Div Height: "+story_con.children("div").height());

		//up arrow
		if(story_top==0 && e.which==38){
			console.log("prev frame")
		}

		//down arrow
		//chrome 280+432 >= 676 i.e. 712>=676 true
		//firefox 207+429 >= 676 i.e 636>=676 false
		else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){
			console.log("next frame");
		}
		else{
			story_con.focus();
			console.log(story_con[0]);
			console.log("stopped propagation");
			e.stopImmediatePropagation();
		}
		return;
	}
});

＆＃13;

＆＃13;

＆＃13;

这就是我调用插件的方式：

＆＃13;

＆＃13;

$('#main').fullpage({
	sectionSelector:'.frame',
	scrollingSpeed:800,
	responsiveWidth:1025,
	normalScrollElements: '#story, #startups, #services',
});

＆＃13;

＆＃13;

＆＃13;

复制： 转到参考链接。通过滚动，箭头键或菜单导航到第二部分（我们的故事）。现在，只使用箭头键，框架应该正常滚动，但滚动完成后，它应该转到下一帧（在Chrome中这样做）。有关详细信息，请参阅js logs。

如果有人能以任何方式帮助我，我会很高兴。我一直试图调试这个。也许我正在关注错误的问题？任何帮助将不胜感激。

P.S。我知道该插件提供了 scrollOverflow 选项。这引发了比这种方法更多的问题。

更新：由于我无法找到任何特定的解决方案，因此我改变了检测框架滚动条是否已到达终点的方法。我用过这个：

//down arrow
else if(container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight){
    console.log("next frame");
}

Answer 1

*这是我的答案的开始，因为我继续调试以提供更好的细节。

目前在小于1280像素的窗口大小上使用Firefox版本49.0.1， # create rect1 = pygame.Rect(30, 30, 60, 60) # move rect1.x += 3 # check colision with bottom of the screen if rect1.bottom > screen.get_rect().bottom: # center on the screen rect1.center = screen.get_rect().center 类中的内容太高了。

当前证据： 在您的div container，#story和#partners中，如果您在每个专业中提供#services的{​​{1}}的直接孩子部分div所有向下箭头键都可以使用。

修改1 在magic.js第111行是你的问题开始的地方。

div.container

每个容器中的内容height: 200px有时会大于else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){，因此它不会进入您想要的下一页路径。

当然这一切都取决于窗户的高度。

您的调试日志记录证明了我的观点：

Answer 2

简单的答案是因为Chrome和Firefox以不同的方式呈现页面。要了解渲染差异的原因，请查看此Explanation

我希望这可以解决它。