fullpage.js水平滚动

基础概念

fullPage.js 是一个用于创建全屏滚动网站的 jQuery 插件。它允许用户通过鼠标滚轮或键盘导航来滚动页面的不同部分，并且支持水平滚动。水平滚动是指页面内容在水平方向上滑动，而不是传统的垂直滚动。

类型

垂直滚动：页面在垂直方向上逐屏滚动。
水平滚动：页面在水平方向上逐屏滚动。
混合滚动：结合垂直和水平滚动，创造更复杂的导航体验。

应用场景

网站首页：用于展示多个主题或产品。
作品集页面：设计师和艺术家可以使用它来展示他们的作品。
营销页面：用于创建引人注目的广告宣传页面。

实现水平滚动

要实现水平滚动，你需要在 fullPage.js 的初始化选项中设置 scrollHorizontally: true。

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
        scrollHorizontally: true
    });
});

遇到的问题及解决方法

问题1：水平滚动不流畅

原因：可能是由于页面内容的宽度设置不正确，或者浏览器渲染性能问题。

解决方法：

确保每个滚动部分的宽度总和等于视口宽度。
使用 CSS3 的 transform 属性来优化滚动效果，减少浏览器的重绘和回流。

.section {
    width: 100vw; /* 视口宽度 */
    display: inline-block;
}

问题2：键盘导航不工作

原因：可能是由于 fullPage.js 的键盘事件绑定问题。

解决方法：

确保在初始化 fullPage.js 时启用了键盘导航。

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
        scrollHorizontally: true,
        keyboardScrolling: true
    });
});

示例代码

以下是一个完整的示例，展示了如何使用 fullPage.js 实现水平滚动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FullPage.js Horizontal Scroll</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
    <style>
        .section {
            width: 100vw;
            height: 100vh;
            display: inline-block;
        }
        .section:nth-child(1) { background-color: #f2f2f2; }
        .section:nth-child(2) { background-color: #4BBFC3; }
        .section:nth-child(3) { background-color: #7BAABE; }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section">Section 1</div>
        <div class="section">Section 2</div>
        <div class="section">Section 3</div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE'],
                scrollHorizontally: true,
                keyboardScrolling: true
            });
        });
    </script>
</body>
</html>

通过以上代码，你可以创建一个简单的水平滚动网站。希望这些信息对你有所帮助！

页面内容是否对你有帮助？

有帮助

没帮助

带有垂直滚动条的水平滚动条页面导航

、、、

因此，我有大约8页，或多或少，我希望用户能够滚动到每一个水平。然而，这8页中的每一页都很长，并且每个页面都需要一个垂直滚动条。因此，当用户使用水平滚动条时，他们应该能够导航不同的页面，但是当使用垂直滚动条时，他们应该能够在他们正在查看的页面上上下滚动。我查看了fullpage.js和sly.js，我不太确定哪一个是实现这种设计的最佳选择。另外，如果有人对如何做到这一点有任何其他的建议，那也是很棒的。

浏览 4提问于2015-12-21得票数 2

回答已采纳

1回答

允许对整页部分进行水平滚动

、、、

我想让"section“div在移动设备上水平滚动。这就是我所尝试的，但它不起作用。

浏览 13提问于2021-04-21得票数 0

1回答

使用fullpage.js的水平滚动条

、、

该网站还使用fullPage.js。移动水平滚动条允许查看器读取许多列的文本。这在桌面上非常好，是一个很好的ux解决方案。您可以在这里查看正在开发的站点：

浏览 2提问于2015-10-05得票数 0

回答已采纳

1回答

如何创建fullpage.js汉堡菜单

fullpage.js支持汉堡菜单吗？我买了fullpage.js滚动最近水平，我希望为我的网站创建一个汉堡菜单。我尝试了许多方法来创作，但我仍然没有得到正确的。这里的专家能帮我解决我的问题吗？

浏览 0提问于2017-09-14得票数 0

1回答

Fullpage.js -仅在某些部分设置fadingEffect

我正在尝试将我的站点设置为使用默认的Fullpage.js滚动行为，直到达到一定程度，然后切换到使用fadeEffect插件。fullpage.js的扩展。定义是否使用褪色效果而不是默认滚动效果。可能的值为真、假、节、幻灯片。因此，它可以应用于垂直或水平，或两者在当时。需要fullpage.js >= 3.0.1。

浏览 5提问于2020-12-12得票数 0

1回答

如何在网页上启用/禁用(实时) javascript插件？

、、、、

问题是:如何禁用宽度< 800的fullpage.js？

浏览 4提问于2014-12-07得票数 0

回答已采纳

1回答

fullpage.js改变卷轴上的滚动方向

、、、、

我正在使用创建一个wp站点，当用户到达某个页面时，我想知道是否可以更改滚动方向。当您访问时，滚动方向是否可能更改为水平方向？所以，我不需要点击箭头来水平地导航，我希望鼠标滚轮水平滚动。这在fullpage.js中是可能的吗?还是我必须换到另一个脚本？

浏览 4提问于2015-03-31得票数 4

1回答

整页js水平滚动条出现在ie上

、、、、

我使用fullpage.js插件为我的project.it在所有其他浏览器工作良好，当涉及到ie，它显示一个水平滚动条。

浏览 3提问于2015-12-03得票数 0

回答已采纳

1回答

Fullpage.js通过向下滚动水平滚动，并在一个区段上完成滚动后再次向下滚动水平？

、、

使用Fullpage.js，我只想使用向下滚动来导航到下一页，它是水平的。在一个页面上，我想下几张幻灯片，垂直导航。在这些完成后，我想转到下一张幻灯片，它又是水平的。当我要垂直滚动的幻灯片是最后一张幻灯片时，我让它工作了。但是当它在幻灯片中间时，它不能工作。

浏览 6提问于2019-04-22得票数 2

3回答

如何在FullPage.js中启用水平滚动？

、、、、

在此之后，用户必须向右滚动才能访问所有其他输入字段...FullPage.js不允许这种类型的滚动，因为它会自动滑到下一个水平页面:即输出部分。有没有办法在Fullpage.Js中启用水平滚动，或者禁用幻灯片，除非他们按下某个按钮？有没有更好的方法来实现这一点？以下是网站：

浏览 2提问于2015-05-17得票数 0

1回答

带水平滑块的FullPage.js普通滚动体

、、、

当我到达一个页面之间时，会丢失自动出现的自动滚动吗？水平滑块不适用于箭头按下/滑动动作。

浏览 2提问于2015-04-22得票数 4

回答已采纳

1回答

Fullpage.js -使用键盘垂直滚动

、、、、

我正在使用Fullpage.js ()插件创建一个页面水平移动的站点。该插件设计用于创建完整的页面站点，通过滚动或向下按键垂直滚动每个部分，就像一个视差站点一样。在我的文件中，我只使用一个带有左右箭头的部分来包含用于水平滚动的多个页面。就像上的例子一样，因为我没有多个部分，当我点击向上/向下键时，它根本不会滚动内容。任何建议都将不胜感激。提前感谢！

浏览 0提问于2015-04-23得票数 2

1回答

基于垂直滚动和fullPage.js的jquery添加/删除类？

、、

我试图根据垂直滚动添加/删除CSS类(例如"clearHeader“和"darkHeader")和jQuery。这本身非常简单，而且工作良好，但当我尝试将其与fullPage.js (参见)结合时，它就不起作用了。//<!});//]]> 有人在此之前就有过这个问题，或者听说过考虑这种不规则滚动的变通脚本吗(基本

浏览 0提问于2015-02-05得票数 0

回答已采纳

1回答

Fullpage.js -水平滚动

、、

我正在尝试用制作一个可以水平滚动的网页。这在任何情况下都有可能吗？到目前为止，我只找到了，但这是否意味着我必须付费，以防我需要这个功能，或者我错过了什么？

浏览 0提问于2016-11-01得票数 2

1回答

为什么在html和body上都设置“`overflow`”？

、、

我刚刚注意到，许多css插件在将页面溢出设置为隐藏(例如)时，使用它们同时将其设置为html和body，如下所示： overflow: hidden;例如，确实喜欢这样。这是跨浏览器的诡计吗？

浏览 6提问于2015-05-07得票数 4

回答已采纳

2回答

全屏响应式水平网站

、、

我试图找到最好的方法，以便创建一个水平的网站，全屏，如果可能的话，响应，最小宽度为平板电脑。问题是，我还需要使用鼠标滚轮进行水平滚动，但我发现fullPage.js不支持这个功能，或者至少我不能让它在这个插件上工作。

浏览 2提问于2013-12-21得票数 3

1回答

wow.min.js与jquery.fullpage.js的结合使用

、、

我正在使用两个著名的插件wow.min.js和，但是当我在同一页面上使用这两个插件时，其中一个不能工作，请帮帮我。我正在使用这两个脚本来调用它们。 $(document).ready(function() { anchors: ['firstPage', 'secondPage', '3rdPage'], sectio

浏览 0提问于2015-06-09得票数 0

1回答

Fullpage.js定制

、、

我正在做一个使用fullpage.js的项目，并且面临着这样的问题。在我的项目中，我有垂直幻灯片，在每个垂直幻灯片中，我都有水平幻灯片。当我们使用鼠标滚动幻灯片时，幻灯片工作正常。也就是说，我们需要分别使用“向上翻页”和“向下翻页”箭头进行垂直滚动，使用“向右”和“向左”箭头分别进行水平滚动。强迫客户对不同的幻灯片使用不同的箭头是我的问题。我们是否可以在不破坏网站连续性的情况下，同时使用垂直幻灯片和水平幻灯片的向上翻页和向下翻页箭头？

浏览 1提问于2018-10-03得票数 0

1回答