Question

我正在调查fullpage.js以创建整页水平滑动内容。我的问题是我的一些内容需要在幻灯片中垂直滚动。 Fullpage并不是真的支持这一点，我想它并不是真的为它做的。我想知道实现这一目标的最佳方法是什么。

|--- header ----|    |--- header --|
| page 1        |    | second page |
| more  content |    |             |
| ...           |    | this one is |
| ...           |  > | shorter     |
| ...           |    |             |
| ...           |    |             |
|-100% height---|    |--- footer --|
| needs to      |
| scroll to see |
|--- footer  ---|

希望这个例子有意义。第一页将具有常规垂直滚动条，并且控件（或箭头键）将允许滑动到第二页。全页可能的是使用slimscroll向溢出添加滚动条并使每个页面保持相同的高度（100％）尽管可行，但我更喜欢使用自然滚动条

关于如何做到这一点的任何想法？

由于

Answer 1

也许您可以尝试在其中集成一些flexbox。不确定fullpage提供了什么，但下面的代码可以帮助您很好地设置它。

see my pen here

使用

display: flex;
align-items: stretch;

在容器上，我也在那里弯曲身体和页脚元素，以便页脚粘到底部。

另请注意

height: 100vh;

在主体和主容器元素上。

我希望它有所帮助。

整页水平滑动与常规垂直滚动

1 个答案: