Question

我试图在这一个中明确表达自己

我正在制作一个网页，其中有几个<section>放置在水平，全宽，他们的父亲有{overflow-x：hidden}。然后，<nav>带有按钮，用jQuery改变每个部分的位置。简化，像这样：

<section style="width:100%;position:absolute;left:0"></section>
<section style="width:100%;position:absolute;left:100%"></section>
<section style="width:100%;position:absolute;left:200%"></section>

这是前提。但是，我的实际项目要复杂得多，每个部分都有不同的高度，除了Chrome之外，我发现每个浏览器都存在一个很大的问题：

我不知道链接我的网页是否可以，但解释起来要容易得多：http://batxewebcomic.esy.es/。如果不允许，请原谅:(

如果您在Chrome中检查，一切正常，一旦您更改了该部分，滚动会自动适合其内容。但是如果你在Firefox中查看，你可以看到滚动不会改变，并且每个部分在页脚后面都有一个巨大的白色内容。

我的问题是，如果我可以手动将滚动条设置为每个部分的高度（仅适用于Mozilla），那么没有人可以滚动白色内容。我尝试了很多东西并且无法解决它，所以我认为可以做到......

非常感谢。

Answer 1

有几种方法可以解决此问题。我认为以下两个最适用于您的用例：

转换完成后，将display: none添加到非活动部分。
将max-height: 100vh和overflow: hidden添加到不活跃的部分。

然而，看了你的来源，我建议你完全放弃这些，并使用CSS / JS来使它工作。

一个简单的代码片段如下：

window.addEventListener('hashchange', function () {
  var chash = location.hash
  $('main section').removeClass('active')
  $(chash).addClass('active')
});

ul.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul.tabs li {
  display: inline-block;
}

ul.tabs li a {
  padding: 2px 5px;
  background: #ddd;
  color: #000;
  border-radius: 2px;
  text-decoration: none;
}

main {
  display: flex;
  overflow: hidden;
}

section {
  display: block;
  width: 100%;
  flex-shrink: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li><a href="#one">One</a></li>
  <li><a href="#two">Two</a></li>
  <li><a href="#three">Three</a></li>
</ul>
<main>
  <section id="one" class="active">
    <h1>Uno</h1>
    <p>Insert content here.</p>
  </section>
  <section id="two">
    <h1>Dos</h1>
    <p>Insert content here..</p>
  </section>
  <section id="three">
    <h1>Tres</h1>
    <p>Insert content here...</p>
  </section>
</main>

如何在jquery中手动设置滚动高度？

1 个答案: