jqueryでスクロールの高さを手動で設定する方法は？

Question

私はこの1人で自分自身を明確にしようとしています

私はいくつかのウェブを横、縦に配置しており、その父親は{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/。あなたがFirefoxをチェックインすると、スクロールが表示されていないことがわかります。これは許可されていません:(

Chromeをチェックインするとすべて正常です。セクションを変更すると、

私は各セクションの高さを手動で（Mozillaの場合のみ）高くできるので、誰も白をスクロールすることができますか？コンテンツ。私は...多くのものを試してみましたが、それを解決することができませんでしたので、私はそれはそれを作ることができると思っ

どうもありがとうございました。

Answer 1

この問題を解決する方法はいくつかあります。私は次の2つがあなたのユースケースに最も適していると思う：

• 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>

：

単純スニペットは、次のようです