Question

我让FullPage.js完美地为我的网站工作，直到我花了一些时间在一个部分添加一些额外的内容。当我这样做时，那个部分变得太大而不适合视口，所以我设置了：

scrollOverflow: true

在整页设置中。当我这样做时，我漂亮的滑块页面停止了工作。现在，每张幻灯片上的内容都不再正常显示。

滑块导航中显示的点数多于幻灯片中的点数标记。
箭头看上去很奇怪（左边是双箭头），点击它们时它们没有响应。
某些幻灯片根本不显示内容。

我玩了一些设置但却无法正常工作。滚动溢出的东西正在工作。

我很感激在这件事上有任何帮助。我尝试将每个幻灯片的内容更改为超级简单的内容：

<p>hi</p>

但它仍有相同的意外行为。

以下是您浏览实时网站的链接。 behavior demo

感谢任何帮助！

Answer 1

听起来好像是多次初始化fullpage.js。

确保只初始化一次。检查一下你只导入一次插件。

Answer 2

问题是由我的脚本在整页DOM元素中引起的。这就是它的样子：

<div id="fullpage">
  ...
  <script src="/Scripts/jquery-1.7.1.js"></script>
  <script src="/Scripts/jquery.fullPage.min.js"></script>
  <script src="/Scripts/jquery.slimscroll.min.js"></script>

  <script>
    $(document).ready(function () {
        $('#fullpageContainer').fullpage({ slidesNavigation: true, verticalCentered: false, paddingTop: 30, scrollOverflow: true });
    });
  </script>
</div>

我不得不改变它：

<div id="fullpage">
  ...
</div>

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.fullPage.min.js"></script>
<script src="/Scripts/jquery.slimscroll.min.js"></script>

<script>
  $(document).ready(function () {
  $('#fullpageContainer').fullpage({ slidesNavigation: true, verticalCentered: false, paddingTop: 30, scrollOverflow: true });
    });
</script>

只是一个愚蠢的错误。感谢您的帮助Alvaro，它帮助我开始寻找适合问题的地方。

当设置scrollOverflow：true时，FullPage.js滑块水平滚动中断

2 个答案: