响应式fullpage.js:增加视口以显示完整内容

Responsive fullpage.js: increase viewport to display full content

本文关键字：显示 视口 fullpage js 增加 响应      更新时间：2023-09-26

我正在使用fullpage.js来设计一个像carousel一样的全页站点。我面临的问题是在实现响应功能时，部分的内容(see #section-1，部分从section-0开始)扩展到视窗之外。

我想要什么?

原来，我想去与scrollOverflow: true，但这似乎没有工作。它莫名其妙地中途切断(隐藏)了我的元素。我在其他帖子中读到，作者不鼓励使用它。然后我使用respondsiveWidth，将其设置为980，因为我想在窗口调整大小或加载宽度小于980px时启动响应模式。滚动条工作得很好，但部分的高度保持不变，即一个完整的视口。我想要的是这一节扩展和容纳它的整个内容。

我试了什么?

  • 我已经添加了类fp-auto-height和fp-auto-height-responsive到特定的部分(#section-1)，但这并没有做任何事情，(我也有一个页脚，有类，其大小小于viewport)
    • 我尝试了以下代码:

afterResize: function(){ if((window).width < 980) { console.log("980"); $("#section-1").addClass("fp-auto-height-responsive"); } }

i tried with CSS:

#section-1, #section-1 .fp-slide, #section-1 .fp-tableCell{ height: auto !important; min-height: 100%; }

我还在CSS中声明了一个单独的类，添加了上述属性，并在我的javascript文件中添加了addClass如果window.width is < 980。

Codepen

我所做的一切似乎都不起作用，我正处于精神崩溃的边缘。

我想要的是这个部分扩展和容纳它的全部内容。

这就是fp-auto-height-responsive的作用。

你可能没有正确使用它。你的不必须动态添加它，但只需添加它的部分，你不希望fullPage.js限制的尺寸。

<div class="section fp-auto-height-responsive" id="section-1">

你的演示对我来说工作正常。当触发响应时，蓝色部分不会获得视口大小，并且文本不会被剪切。

如果你要求第二部分，这是完全正常的。您正在使用fixed元素。就像你使用absolute一样。在这些情况下，fullPage.js无能为力。fullPage.js只停止限制部分的尺寸，这意味着它将采取任何尺寸，否则将采取。在你的例子中，任何固定或绝对位置的元素都不会强制其父元素的高度改变。

相关文章：