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

【问题标题】：Is there a way in which I can isolate a vertical slider from the rest of the website sections below?有没有一种方法可以将垂直滑块与下面的其他网站部分隔离开来？
【发布时间】：2021-05-09 14:09:20
【问题描述】：

我了解 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;在正文上同时应用overflow-y:hidden on fullpage，但效果不佳。

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

【问题讨论】：

请使用 fullpage.js 代码显示您的输出。

标签： html css slider fullpage.js

【解决方案1】：

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

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

各位，问题出在上面。

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

【讨论】：