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

【问题标题】：How to set scroll height manually in jquery?如何在 jquery 中手动设置滚动高度？
【发布时间】：2016-12-19 20:33:30
【问题描述】：

我试图在这件事上让自己清楚

我正在制作一个网页，其中有几个 <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 中签入，一切正常，一旦您更改部分，滚动条会自动适应其内容。但是如果你在火狐中查看，你可以看到滚动并没有改变，并且每个部分的页脚后面都有一个巨大的白色内容。

我的问题是我是否可以手动使滚动条与每个部分的高度一样高（仅适用于 Mozilla），所以没有人可以滚动白色内容。我尝试了很多东西都无法解决，所以我认为这可以解决...

非常感谢。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

在过渡到非活动部分后添加display: none。
将max-height: 100vh 和overflow: hidden 添加到非活动部分。

但是，在查看了您的源代码后，我建议您完全取消绝对定位这些并使用 CSS/JS 来使其正常工作。

一个简单的sn-p，如下：

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>

【讨论】：