सीएसएस: ओवरफ्लो-वाई: स्क्रॉल; ओवरफ़्लो- एक्स: दिखाई

Question

एक तस्वीर मेरे सवाल पर प्रकाश डाला और एक संभावित समाधान के लिए निम्नलिखित पोस्ट देखें:

CSS overflow-y:visible, overflow-x:scroll

हालांकि, इस रणनीति टूट जाता है जब आप वास्तव में स्क्रॉलबार चलते हैं। सुझाए गए कार्यान्वयन में (position: fixed;), टूलटिप्स अपनी स्थिति प्री-स्क्रॉल में बाल div के बगल में प्रदर्शित होता है। इसलिए, जब आप नए बच्चे-divs को देखने के लिए स्क्रॉल करते हैं, तो टूलटिप्स पृष्ठ के नीचे गिरने लगते हैं। http://jsfiddle.net/narcV/4/

कोई भी विचार कैसे मैं टूलटिप्स बना सकते हैं हर समय बच्चे div के आगे प्रदर्शित:

बग का एक डेमो के लिए यहाँ देखें?

Answer 1

मैं इस जावास्क्रिप्ट का उपयोग कर को लागू करने, this question से getPos समारोह का उपयोग कर समाप्त हो गया।

अंत उत्पाद लगता है:

var scrollPanel = ...; 
var tooltip = ...; 
function nodeHovered(e) { 
    var hovered = e.srcElement; 
    var pos = getPos(hovered); 
    pos.x += hovered.offsetWidth; 
    pos.y -= scrollPanel.scrollTop; 
    tooltip.style.setProperty('left', pos.x); 
    tooltip.style.setProperty('top', pos.y); 
} 

असल में, मैं गणना जहां पृष्ठ पर नोड वर्तमान में प्रदर्शित किया जाता है (खाते में स्क्रॉलबार स्थान ज्ञात), और मैन्युअल रूप से सही जगह पर टूलटिप जगह पृष्ठ।

बहुत बुरा कोई ऐसा करने के लिए कोई सुरुचिपूर्ण/सीएसएस तरीका नहीं है, लेकिन कम से कम यह काम करता है।

Answer 2

मुझे लगता है कि आपको position:fixed के बजाय position:absolute का उपयोग करना चाहिए।

.parent { overflow-y:scroll; width:100%; height:100px; } 
.child { position:relative; } 
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; } 
.child:hover .child-menu { display: block; } 

फिडल डेमो, http://jsfiddle.net/68fBE/2/