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

Question

嗨,大家好,首先,如果这是重复,请跟我一起,因为我找到的任何类似问题都没有回答.

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

所以,我使用的是jQuery和jQuery fullPage插件.它帮助我实现逐帧滚动.

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

所有的工作都很好用铬,因为我用铬建造我使用了一些我在铬上观察到的计算.但是firefox显示了不同的结果,特别是使用scrollTop.

我知道高度可能存在差异但是如果你看到参考链接中的日志,你会看到,高度几乎相同(即使它不适合你,它的scrollTop值是一个问题).

这是我用来决定是否停止传播的代码.

$(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;
	}
});

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

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

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

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

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

更新:由于我无法找到任何特定的解决方案,我改变了检测帧滚动条是否已到达终点的方法.我用过这个:

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

Answer 1

*这是我回答的开始，我将继续调试以便为您提供更好的详细信息。

当前在小于 1280px 的窗口尺寸上使用 Firefox 版本 49.0.1，您的container类中的内容太高。

当前证据：在您的 div、#story、#partners和中，如果您在每个主要部分中#services给出div的直接子项，则所有向下箭头按键都将起作用。div.containerheight: 200px

编辑 1 在 magic.js 中，第 111 行是问题开始的地方。

else if(story_top + story_con.height() >=story_con.children("div").height() && e.which==40){

每个容器中的内容story_con.children("div").height()有时大于，story_top + story_con.height()因此它不会进入您想要的下一个页面路径。

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

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