我正在尝试创建一个具有多个可垂直滚动的全高面板的网页，我希望这些面板可以捕捉到屏幕边界。 在此fiddle上可以找到一个非常简单的原型。
如您所见，所有面板的最小高度都减去固定的标题高度。问题是第三个面板包含的许多内容使面板比屏幕高。因此，我不能使用height: calc(100vh - 40px)而是使用min-height来确保不截断文本。
这确实会导致滚动麻烦。当您从第三面板滚动到第四面板时，可以看到，捕捉机制和滚动行为与上面的面板略有不同。默认情况下，浏览器仅在父容器高度减半的情况下才捕捉到下一个div。但是，如果已经可以看到一个小条（接近屏幕可见高度的25％），则最后一个面板将捕捉到顶部。如果最后一个面板仅对某些像素可见，则第三个面板会下移到底部，但是当捕捉到屏幕底部时，第三个面板会向上滚动一些像素（因此，第三个面板的底部不适合屏幕底部）。
有人对此有任何解释或解决此问题的方法（除了使用height代替min-height之外）？我已经看过fullPage.js和Scrollify，但是它们不符合我的需求，我想自己用CSS和JS / jQuery来解决它。