时间戳

首页 > 解决方案 > 有没有一种方法可以将垂直滑块与下面的其他网站部分隔离开来？

html - 有没有一种方法可以将垂直滑块与下面的其他网站部分隔离开来？

问题描述

我了解 fullpage.js 仅用于构建单页垂直滑块导向的网站，其中网站的内容分别从幻灯片转换为向上或向下的幻灯片。

在成功实施并在某种程度上将垂直滑块定制为新的网站布局后，我无法查看位于其下方的网站的其他部分。

垂直滑块似乎会阻止其下方的其余 html 部分块出现。就好像垂直滑块在说：“我是网站”（忽略了我放在它下面的地狱）。

这是我们所拥有的：

<div id="fullpage">
<div class="slide" id="slide_1">
    <div class="slide_caption">
        <h1>This is slide 1</h1>
        <h4>slide 1 description</h4>
        <a href="#">Read More</a>
    </div>
</div>
<div class="slide" id="slide_2">
    <div class="slide_caption">
        <h1>This is slide 2</h1>
        <h4>slide 2 description</h4>
        <a href="#">Read More</a>
    </div>
</div>
<div class="slide" id="slide_3">
    <div class="slide_caption">
        <h1>This is slide 3</h1>
        <h4>slide 3 description</h4>
        <a href="#">Read More</a>
    </div>
</div>
<div class="slide" id="slide_4">
    <div class="slide_caption">
        <h1>This is slide 4</h1>
        <h4>slide 4 description</h4>
        <a href="#">Read More</a>
    </div>
</div>
</div>

<section class="full_width_container" id="home_container_1">
<!-- extra mark up for other stuff like latest products etc -->
</section>

<section class="full_width_container" id="home_container_2">
<!-- extra mark up for other stuff like news etc -->
</section>

<section class="full_width_container" id="home_container_3">
<!-- extra mark up for other stuff like testimonials etc -->
</section>

<section class="full_width_container" id="home_container_4">
<!-- extra mark up for blog post links -->
</section>

<footer>
<!-- extra mark up for footer items -->
</footer>

我的问题是 - 我到底怎么才能让下面的其他部分，即 home_container_1、home_container_2、home_container_3 出现？

我尝试应用 overflow-y:scroll !important; 在正文上同时应用溢出-y：在整页上隐藏，但它并没有完全起作用。

如果有人能就正在发生的事情指出我正确的方向，我将不胜感激。

标签： htmlcsssliderfullpage.js

解决方案

解决方案：如果有人最终遇到此问题，则该问题 99.999% 与不包括 DOCTYPE html 声明有关。

grrrrr @这个男生错误。为什么，尽管做了这么多年的网络开发，我还是犯了这些愚蠢的错误：| ? fullpage.js 的作者 Alvaro 在他的文档中明确提到了这一点，“确保包含 DOCTYPE html 声明，否则高度将无法正常工作..”

好了，伙计们，问题出在上面。

现在垂直滑块保持不动，占据屏幕的 100vh，如果您使用鼠标滚动，它会滚动视口中的整个内容，因此您可以查看滑块下方的内容（其他网站部分）。

推荐阅读