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

Question

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

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

或在其他 css 标签中相同：

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

但其中 none 效果很好。我发现 this communication 与插件的作者有关，但我不确定他的回复是否足够有用。你能帮我实现那个功能吗？谢谢！

Answer 1

对 window 的指定维度使用媒体查询并添加属性 "overflow: scroll".

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

Answer 2

将 overflow:auto 添加到您的 <body> 标签。滚动条将根据 window 大小显示。

Answer 3

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

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

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

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

经过更多测试后，答案初稿中的 'dirty' 方法似乎也有效（奇怪的是，只有当我从外部链接到 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%"})

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

How to show horizontal scrollbar if user resizes the window created on fullpage.js

javascript

jquery

html

css

fullpage.js