How to set scroll height manually in jquery?

Question

I'm trying to make this clear

I make a web with several <section> placed in horizontal, full width, and their father has {overflow-x: hidden}. Then a <nav> with buttons that reposition each section using jQuery. Simplified, something like this

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

This is a premise. But my actual project is much more complicated, each section has a different height, and I found a huge problem in every browser that I used except Chrome:

I don’t know if it’s ok to link my website, but it is much easier to explain: http://batxewebcomic.esy.es/ . Sorry if this is not allowed :(

If you sign up for Chrome, everything will be fine; if you change the section, scrolling automatically matches its content. But if you sign up for Firefox, you can see that the scrolling does not change, and each section has huge white content after the footer.

My question is that I can make the scroll bar above the height of each section manually (only for Mozilla), so no one can scroll through white content. I tried a lot of things and couldn't solve it, so I thought it could do ...

Thank you very much.

Answer 1

There are several ways to address this behavior. I think the following two are most applicable for your use case:

• Add display: none after going to inactive partitions.
• Add max-height: 100vh and overflow: hidden to inactive sections.

---

However, looking at your source, I would advise you to completely neutralize this situation and use CSS / JS to make it work.

A simplified snippet is as follows:

 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>