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

我正在做一个网站与几个<section>放置在水平，全宽，他们的父亲{溢出-X：隐藏}。然后，带有按钮的<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，你可以看到滚动doesn' t改变，并且每个部分在页脚之后都有一个巨大的白色内容

我的问题是，如果我可以使滚动条像手动高度的每个部分一样高（仅适用于Mozilla），所以没有人可以滚动白色我试了很多东西，解决不了，所以我觉得可以让它...

非常感谢，

来源

2016-12-19 batxe

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

将转换结束后的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>

来源

2016-12-20 08:35:26

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

回答

相关问题