सीएसएस ओवरफ्लो-वाई: दृश्यमान, ओवरफ़्लो-एक्स: स्क्रॉल

Question

मैंने अपनी खोज में इस तरह के कुछ प्रश्न देखे हैं, लेकिन या तो प्रश्न का सही उत्तर नहीं दिया गया था या कोई जवाब नहीं दिया गया था। तो, मैं फिर से पूछूंगा।

<style> 
.parent { overflow-y:scroll; overflow-x:visible; width:100px; } 
.child { position:relative; } 
.child-menu { position:absolute; top:0px; left:-100px; display:inline-block; } 
</style> 

    <div class="parent"> 
    <!-- Lots of the following divs --> 
    <div class="child"> 
    Text Line 
    <div class="child-menu">some pop out stuff</div> 
    </div> 
</div> 

ठीक है, यह सिर्फ एक उदाहरण है। लेकिन मूल रूप से, जो मैं पूरा करने की कोशिश कर रहा हूं वह है। चाइल्ड क्लासेस वाई अक्ष पर स्क्रॉल करने योग्य हैं ... ऊपर और नीचे स्क्रॉल करें। लेकिन मुझे एक्स-अक्ष चाहिए .... बच्चे के मेनू को। Parent कंटेनर के बाहर दिखाई देना चाहिए।

क्या यह समझ में आता है? तो क्या हो रहा है कि जब पृष्ठ प्रस्तुत करता है, ब्राउज़र अतिप्रवाह को पूरी तरह से ऑटो के रूप में व्याख्या कर रहा है और अलग अक्ष का सम्मान नहीं कर रहा है। क्या मैं कुछ गलत कर रहा हूं या ब्राउज़र अभी तक CSS3 spec तक नहीं हैं? ज्यादातर क्रोम पर ही परीक्षण किया जाता है।

Answer 1

मैंने इसे समझ लिया!

माता-पिता अतिप्रवाह होना चाहिए: ऑटो; .child स्थिति होना चाहिए: सापेक्ष; .child-menu स्थिति होना चाहिए: निश्चित; NO शीर्ष या बाएं पोजिशनिंग के साथ। यदि आप ऐसा करते हैं, तो यह इसे सामग्री के साथ इनलाइन रखेगा।

यदि आपको बच्चे-मेनू का उपयोग मार्जिन को स्थानांतरित करने की आवश्यकता है, न कि ऊपर या बाएं। उदाहरण मार्जिन-बाएं: -100 पीएक्स;

Answer 2

यह हल हो गया! वे सीएसएस और जेएस का उपयोग करते हैं।

.child:hover .child-menu { display: block; } 

.parent { overflow-y:auto; overflow-x:hidden; width:100px; height:150px } 
    .child { position:static; } 
    .child-menu { position:absolute; display:inline-block; display: none; } 

https://css-tricks.com/popping-hidden-overflow/

https://jsfiddle.net/68fBE/2/