jquery में मैन्युअल रूप से स्क्रॉल ऊंचाई कैसे सेट करें?

Question

मैं कई <section> क्षैतिज, पूरी चौड़ाई में रखा के साथ इस एक

मैं एक वेब बना रही हूँ में अपने आप को स्पष्ट करने की कोशिश, और उनके पिता है {ओवरफ़्लो- एक्स: छिपा}। फिर, <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> 

इस आधार है। लेकिन, मेरी वास्तविक परियोजना बहुत जटिल है, प्रत्येक अनुभाग में अलग-अलग ऊंचाई हैं, और मुझे क्रोम को छोड़कर इस्तेमाल किए गए प्रत्येक ब्राउज़र में एक बड़ी समस्या मिली:

मुझे नहीं पता कि मेरे वेब को लिंक करना ठीक है या नहीं, लेकिन यह है समझाने के लिए बहुत आसान: http://batxewebcomic.esy.es/। क्षमा करें अगर इसकी अनुमति नहीं है :(

यदि आप क्रोम में चेक करते हैं, तो सबकुछ ठीक काम करता है, एक बार जब आप अनुभाग बदल जाते हैं, तो स्क्रॉल स्वचालित रूप से अपनी सामग्री फिट बैठता है। लेकिन अगर आप फ़ायरफ़ॉक्स में चेक करते हैं, तो आप स्क्रॉल नहीं देख सकते हैं ' टी परिवर्तन, और प्रत्येक अनुभाग में पाद लेख के बाद एक विशाल सफेद सामग्री है।

मेरा सवाल यह है कि यदि मैं स्क्रॉलबार को प्रत्येक अनुभाग की ऊंचाई के रूप में लंबा (केवल मोज़िला के लिए) बना सकता हूं, तो कोई भी सफेद पर स्क्रॉल नहीं कर सकता सामग्री। मैं सामान का बहुत कोशिश की और इसे हल नहीं कर सकता है, इसलिए मैंने सोचा कि यह कर सकता है ...

धन्यवाद एक बहुत।

Answer 1

इस व्यवहार को हल करने के कई तरीके हैं। मुझे लगता है कि निम्नलिखित दो अपने यूज-केस के लिए सबसे अधिक लागू होते हैं:

• display: none जोड़े के बाद संक्रमण निष्क्रिय वर्गों के लिए खत्म हो गया है।
• max-height: 100vh और overflow: hidden को निष्क्रिय अनुभागों में जोड़ें।

---

लेकिन अपने स्रोत में देखा, मैं आप पूरी तरह कुल मिलाकर इन स्थिति और सीएसएस/जे एस का उपयोग यह काम कर पाने के साथ भाग कर सुझाव देना चाहेंगे।

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>

:

एक साधारण टुकड़ा, पीछा कर रहा है