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

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 中 checkin ，一切正常，一旦您更改了部分，滚动会自动适合其内容。但是如果你在 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>