参考链接：http://old.crazyripples.com/?debug=1
我正在使用jQuery和jQuery fullPage插件，它可以帮助我实现逐帧滚动。
对于内部div，其垂直高度大于窗口高度的情况，我使用了一些函数来检查滚动条位置，并使用 stopPropagation 函数将其传递给插件，以便内部滚动条在不移动框架的情况下滚动。
在chrome中，所有的都运行良好，因为我是在chrome构建的，我使用了一些我在chrome上观察到的计算。但是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日志。
如果有人能以任何方式帮助我，我会非常感激。我已经尝试了一段时间来调试这个问题。也许我关注的是错误的问题？任何帮助将不胜感激。
P.S. 我知道插件提供了一个scrollOverflow选项。但那比这种方法还要引起更多问题。
更新：由于我找不到特定的解决方案，所以我改变了我的方法，检测框架滚动条是否已到达其末端。我使用了这个：
//down arrow
else if(container[0].offsetHeight + container[0].scrollTop >= container[0].scrollHeight){
console.log("next frame");
}
div#services目前太高（即使在 iMac 显示器上），无法使用 1 个向下箭头按键进行过渡。 - T.Okahara