Question

我创建了一个使用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与该插件的作者，但我不确定他的回答是否足够有用。你能帮我实现这个功能吗？谢谢！

Answer 1

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

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

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

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

经过一些更多的测试，“肮脏的”＆＃39;从答案的第一稿开始下面的方法似乎也起作用（奇怪的是，只有当我在Codepen上外部链接到修改后的脚本时） - 创建一个水平条，但保持整页高度不变（没有垂直溢出）。但是根据脚本加载的顺序，使它正确触发似乎非常棘手。

CSS中html和body都有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%"})

Answer 2

将overflow:auto添加到您的<body>代码中。滚动条将根据窗口大小显示。

Answer 3

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

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