如果用户调整在 fullpage.js 上创建的窗口大小，如何显示水平滚动条答案

【问题标题】：How to show horizontal scrollbar if user resizes the window created on fullpage.js如果用户调整在 fullpage.js 上创建的窗口大小，如何显示水平滚动条
【发布时间】：2015-06-30 06:43:26
【问题描述】：

我创建了一个使用 fullPage.js 脚本的非常简单的网页。基本上它作为样本page provided by the author 工作。现在，我想将 min-width 放在页面上，这样当用户决定水平调整窗口大小并使其足够小时 - 而不是缩小内部的 div - 我只会显示浏览器原生的水平滚动条。我尝试添加：

body {
    min-width: 900px;
    width: 100%;            
}

或在其他css标签中相同：

.section {
    text-align:center;
    width: 100%;
    min-width: 900px;
}

但没有一个效果很好。我在插件的作者那里找到了this communication，但我不确定他的回复是否足够有帮助。你能帮我实现那个功能吗？谢谢！

【问题讨论】：

我决定这样做是因为否则内容会缩小很多而且看起来很乱......我认为它会解决我的问题，就像他们在 www.apple.com 或google.com 页面 - 如果您将网页缩小到足够，还有水平滚动条
@JDB 你应该告诉 Google、Flickr、Tumblr、Facebook、Apple、Sony、RedBull、British Airways、Mediafire ......他们都在他们的一些页面中使用了这种技术.
我不想卷入一场火焰战争。一切都有时间和地点，包括不太理想的 UI 策略。我唯一的建议是你问问自己为什么会你选择这个特定的设计模式。如果您能想出的唯一答案是因为酷，那么您可能需要多考虑一下。它可能会严重惹恼您的一些（也许很多）用户。

标签： javascript jquery html css fullpage.js

【解决方案1】：

所以我决定自己制作一个测试页面并阅读插件。得出的结论是，这将是要走的路，而不是试图改变插件本身：

$(document).ready(function() {
  $('#fullpage').fullpage({responsive: 900});
});

它实际上就在这里作为对链接到（脸红）的 GitHub 问题的评论。这样做的缺点是它也会触发垂直滚动条。

++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++++++++++++

经过更多测试后，答案初稿中的“肮脏”方法似乎也可以正常工作（奇怪的是，只有当我在 Codepen 上外部链接到修改后的脚本时）——创建一个水平条但保持完整页面高度完好（没有垂直溢出）。但是要让它正确触发似乎非常棘手，具体取决于加载脚本的顺序。

html 和 body 在 CSS 中都有 overflow: hidden，所以我建议将其更改为：

html, body {
overflow-y: hidden;
}

但看起来样式也是通过内联脚本设置的。这是缩小的，因此在那里找到确切的代码可能很棘手（但并非不可能，我在 fullPage.min.js 中只看到两个可能的候选者）。最后一个选项是用 jQuery 再次覆盖它，但这有点混乱。

编辑 - 非缩小脚本中的相关代码：

if(options.autoScrolling && !options.scrollBar){
    $htmlBody.css({
    'overflow' : 'hidden',
    'height' : '100%'
});

看起来和这个一样：

c.autoScrolling&&!c.scrollBar?(w.css({overflow:"hidden",height:"100%"})

所以我会尝试：

c.autoScrolling&&!c.scrollBar?(w.css({"overflow-y":"hidden",height:"100%"})

【讨论】：

感谢 Shikkediel 的努力，抱歉回复晚了！您能否给我更多详细信息，我应该如何实施您的解决方案？我应该更改 fullpage.js 的 java 脚本库还是只在代码中的某处插入该行？谢谢！
当然，没问题。总体上有点生气，因为有人无缘无故地投了反对票。但这没关系。如果您要链接到缩小的脚本，您可以使用文本编辑器并“找到”该行代码并仅替换它。确保使用不添加 BOM 的编辑器。 Notepad++ 或editpadlite.com 应该可以。完整的脚本实际上非常易读，并且其中包含一些关于做什么的很好的提示。让我知道它是否有效。无法完全测试自己，但肯定可以调试它的结果。
如果我可能遗漏任何东西，我会再好好看看。你有链接到你的页面吗？这将使调试更容易。一个棘手的问题可能是 overflow 在添加 y 轴时需要在其周围加上引号。
很高兴成功了。但是需要垂直滚动条吗？该脚本与overflow 属性密切相关，因此我还没有达到水平滚动条可见但垂直不...的地步
非常欢迎。你知道他们说什么，这是关于旅程而不是目的地。大声笑。

【解决方案2】：

将overflow:auto 添加到您的<body> 标记中。滚动条会根据窗口大小出现。

【讨论】：

谢谢，但这个解决方案对我来说效果不佳，我认为插件会以某种方式阻止它 - 在普通网页上它可以工作，但可能不是基于 fullPage.js 的网页跨度>
@randomuser1 我在您问题的示例页面中添加了溢出：自动并且它有效。那个页面不是有fullpage.js吗？

【解决方案3】：

对窗口的指定维度使用媒体查询，并添加属性“overflow:scroll”。

@media screen and (max-width: 900px) {
body {
overflow: scroll;
}
}

【讨论】：

谢谢，但情况与 DivakarDass 提供的评论相同 - 它不起作用，当我调整窗口大小时没有出现滚动条，在我的情况下可能是问题fullPage.js 插件的...
@randomuser1 - 该解决方案并不完美！你有一个约束，特别的宽度！所以溢出：对于 900px，auto 不会神奇地工作。媒体查询是一种方式。如果它不起作用，可能是因为脚本停止显示滚动条。